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'};将在每次更改时触发。

这是意外行为吗？还是我们必须定义所有属性以便它们被监视？

- user1897253

Answer 1

文档中已经介绍了这个问题，可以在这里查看。

由于现代JavaScript的限制（以及Object.observe的放弃），Vue无法检测属性的添加或删除。通过用一个空对象开始并将v-model设置为filters.name，您最终会动态添加属性。在这种情况下，最好的方法是在数据中初始化该属性。它不必有一个值。

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

- Bert

Answer 2

你可以使用类似下面代码的东西： this.$set(this.filters, 'name', "") 使用 $set（如 https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats 中所述），可正确添加 observable。

- Sérgio Reis

Answer 3

你可以将 filter 对象的初始化放入 data 属性中，在 Vue 生命周期钩子 的 created 中进行。

var vueTable = new Vue({
    el: '#vue-table',
    // If you attach filters at this point in time
    // the watcher will work normally.
    created: function () {
        this.$data.filters = {
            filter_one: null,
            filter_two: null
        };
    },
    data: {
        filters: null,
    },
    watch: {
        filters: {
            handler: function (newValue) {
                // Here you will get the entire filter object 
                // if some property changes.
                console.dir(newValue);
            },
            deep: true
        }
    }
}

- Valentine Shi