[Vuejs]-Strage Vue behaviour. V-if does not watch properly

by

2👍

✅

This is because of the way TypeScript transpiles class properties without values.

Consider two classes:

class ClassA {
    private myProperty: boolean;
}

class ClassB {
    private myProperty: boolean = false;
}

In ClassA we define a property which TypeScript knows about. In ClassB we define a property which TypeScript knows about AND assigns a value to.

In ES5 these transpile to the following:

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

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

It is easy to see that this property is actually only created once the value is assigned. And without it, Vue cannot know that this property exists.

If you take a look at the guide at vuejs.org there is a section about reactivity.

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.

👤Eliott Robson

Leave a comment