Vue.js 观察深层属性

Posted 2023-02-22

【中文标题】Vue.js 观察深层属性

【英文标题】：Vue.js watching deep properties

【发布时间】：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'; 放在表格初始化之后，它会在每次更改时触发。

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

【参考方案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