javascript - Strage Vue 行为。 V-if 没有正常观看

Question

我有一个非常奇怪的问题。我有简单的服务和 vue 组件。在模板中，我有 v-if 监视服务变量(如果是 true - div 应该显示，否则不应该显示)。当我用分配的 bool 值定义变量时它有效，但当变量未定义时它不起作用。我的方法 isOpened() 无论如何都会将其评估为 bool 值，所以我不明白为什么这段代码不能正常工作。也许下面的代码可以更好地解释这个问题:

<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)
    }
};

Answer 1

这是因为 TypeScript 转换没有值的类属性的方式。

考虑两个类:

class ClassA {
    private myProperty: boolean;
}

class ClassB {
    private myProperty: boolean = false;
}

在 ClassA 中，我们定义了一个 TypeScript 知道的属性。在 ClassB 中，我们定义了一个 TypeScript 知道的属性并为其赋值。

在 ES5 中，这些内容会转译为以下内容:

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

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

很容易看出，该属性实际上仅在赋值后才创建。如果没有它，Vue 就无法知道这个属性的存在。

如果您查看 vuejs.org 上的指南有一个关于 react 性的部分。

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.