Vue.js 观察深层属性答案

【问题标题】：Vue.js watching deep propertiesVue.js 观察深层属性
【发布时间】：2017-11-29 08:07:05
【问题描述】：

我正在尝试查看 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'}; 放在表格初始化之后，它会在每次更改时触发。

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

文档涵盖了这个here。

由于现代 JavaScript 的局限性（以及放弃 Object.observe)，Vue 无法检测到属性添加或删除。

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

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

【讨论】：

那太可惜了，我想那就没什么可做的了:)，非常感谢

【解决方案2】：

你可以用这个样子的东西

this.$set(this.filters, 'name', "")

使用 $set （如https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats 中所述）observable 将被正确添加

【讨论】：

【解决方案3】：

您可以将filter 对象初始化在data 属性中放入created Vue lifecycle hook。

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

【讨论】：