收到子属性密钥更改的通知?

Question

Vue 让你有监视给定属性(甚至是嵌套属性)的观察器：

// keypath
vm.$watch('a.b.c', function (newVal, oldVal) {
// do something
})

但是，给定一个像这样的 vue 实例：

var vm = new Vue({
data: {
options: {
a: 1,
b: 2,
c: 3
}
},
})

有没有办法监视options，以便在任何子属性随key和value更改时收到通知？

注意：我还希望获得更改的值与哪个键相关。

会回复类似以下内容的东西：function(key, value) {}甚至可能：function(key, value, oldValue) {}？

Answer 1

您可以遍历键，并为每个键创建一个观察程序，该观察程序使用键和值调用方法。

var vm = new Vue({
el: '#app',
data: {
options: {
a: 1,
b: 2,
c: 3
}
},
created() {
for (const k of Object.keys(this.options)) {
this.$watch(`options.${k}`, (newVal, oldVal) => this.optionWatcher(k, newVal, oldVal));
}
},
methods: {
optionWatcher(key, newVal, oldVal) {
console.log(`Updated ${key} from ${oldVal} to ${newVal}`);
}
}
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
<div v-for="k in Object.keys(options)">{{k}}={{options[k]}}<button @click="++options[k]">Increment</button>
</div>

Answer 2

默认情况下，Vue 会监视你在数据中定义的所有属性，所以当你更改 options.a 时，options.b 和 options.c Vue 会注意到。但是如果你设置了类似的东西

options.d = 'foo'

Vue不会注意到它。要让 vue 观看 options.d，你需要使用 Vue.set： https://v2.vuejs.org/v2/api/#Vue-set