目录
我刚开始对数组里的对象属性监听
以下对象里的newValue是改变后的新值，oldValue是改变之前的旧值
watch:{ 'listMenu[4].value':{ handler(newValue, oldValue) { console.log(newValue) } }
直接报错Watcher only accepts simple dot-delimited paths. For full control, use a function instead
想要监听数组内对象属性变化用以下两种方法即可：
1.//第一种方法： created() { this.$watch( () => this.listMenu[4].value, function(val, old) {} ) } //第二种方法： computed:{ watchInputData(){ return this.listMenu[4].value } }, watch:{ watchInputData() { //这里即可监听到 } }
监听一个对象及属性
/*普通watch无法监听到对象内部属性变化，只有data中数据改变时才能监听变化。 因此可添加deep属性:深层遍历，会监听对象内所有属性都变化。注意监听数组的变更不需要这么做。*/ watch: { //第一种监听所有属性的变化,直接监听整个属性，消耗大不建议 obj: { handler(newValue, oldValue) { console.log("对象所有属性监听", newValue, oldValue); }, deep: true }, //第二种监听对象一个属性的变化 "obj.name": { immediate: true, //true首次加载执行，默认false handler(newValue, oldValue) { console.log("单个属性监听", newValue, oldValue); } }, }
同样也可以设置计算属性computed来监听
omputed: { getName: function() { return this.obj.name } } watch: { getName: { handler: function() { //监听 }, } }
首次加载不调用监听函数
watch首次加载时不会调用的，只有值变化时才能执行，若要首次调用，需要使用immediate属性。只需在对应的函数内使用immediate: true即可；
