javascript - Vue.js 观察深层属性

Question

我正在尝试查看 vue.js 对象的属性，但没有得到我想要的结果，我的代码如下:

var vueTable = new Vue({
    el: '#vue-table',
    data: {
        filters: {},
    },
    watch: {
        filters: {
            handler: function () {
                console.log('watched');
            },
            deep: true
        }
    }
}

我在这样的输入上有一个 v-model:

<input class="form-control" v-model="filters.name">

现在，当页面加载时，它只会在控制台中记录一次watched，每当我更改输入时，它都不会记录任何内容。

然而，当我在表格初始化之后放置 vueTable.filters = {name: 'something'}; 时，它会在每次更改时触发。

这是意外行为吗？还是我们必须定义我们所有的属性才能被监视？

Answer 1

文档涵盖了这个 here .

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

通过从一个空对象开始并将 v-model 设置为 filters.name，您最终可以动态添加一个属性。在这种情况下，最好的方法是初始化数据中的属性。它不必具有值。

data: {
    filters: { name: null },
}