Strage Vue行为。 V-如果没有正确观察

问题描述：

我有一个很奇怪的问题。我有简单的服务和vue组件。在模板中，我有v-如果哪个监视服务变量（如果它是真的 - div应显示，否则不应该）。它在我定义具有指定布尔值的变量时起作用，但在变量未定义时不起作用。我的方法isOpened（）将它评估为布尔值，所以我不明白为什么这个代码不能正常工作。也许下面的代码会解释这个问题更好：Strage Vue行为。 V-如果没有正确观察

<template> 
    <div id="communicate" v-if="service.isOpened()"> 
     This should display if 'f' property in service is true 
    </div> 
</template> 

<script lang="ts"> 
import Vue from 'vue'; 
import Component from 'vue-class-component'; 

class OtherService { 
    private f:boolean = false; //works, div is displayed with this line uncommented 
    //private f:boolean; // f is undefined - does not work with this line uncommented 

    public info(foo:string) { this.f = true; } 
    public isOpened() { return (this.f === true) } //f is evaluated to bool anyway so it should not be any difference 
} 
export default { 
    name: 'component', 
    data: function() { 
     return { 
      service: new OtherService() 
     } 
    }, 
    mounted: function() { 
     console.log(this.service.isOpened()) //prints always false - ok 
     setTimeout(() => { 
      this.service.info('setting f to true') // f is set to true 
      console.log(this.service.isOpened()) // prints true, div should display. 
     }, 2000) 
    } 
};

答

这是因为没有办法打字稿值类transpiles性能。

考虑两类：

class ClassA { 
    private myProperty: boolean; 
} 

class ClassB { 
    private myProperty: boolean = false; 
}

在ClassA的我们定义打字稿知道的属性。在ClassB中，我们定义一个TypeScript知道的属性并为其分配一个值。

在ES5这些transpile以下几点：

var ClassA = (function() { 
    function ClassA() { 
    } 
    return ClassA; 
}()); 

var ClassB = (function() { 
    function ClassB() { 
     this.myProperty = false; 
    } 
    return ClassB; 
}());

不难看到，一旦值赋给这个属性实际上只创建。如果没有它，Vue不会知道这个属性存在。

如果你看看vuejs.org的指南，有一个关于反应性的部分。

由于现代JavaScript（以及放弃Object.observe）的限制，Vue无法检测属性添加或删除。由于Vue在实例初始化期间执行getter/setter转换过程，因此数据对象中必须存在一个属性，以便Vue将其转换并使其处于被动状态。

Strage Vue行为。 V-如果没有正确观察

相关推荐