1 问题
今天用vue的监听属性，来实现数据改动，控制台输出结果。结果就出现下面的错误
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让numbers.a改变</button>
<button @click="info=666">点我让numbers.a改变</button>
</div>
</body>
<script>
Vue.config.productionTip=false;
const vm =new Vue({
el:'#root',
//固有属性
data:{
info:'热',
numbers:{
a:1,
b:2,
},
},
//计算属性
computed:{},
//方法属性
methods:{},
//监视属性
watch:{ //监视多级结构中某个属性的变化
info:{
handle(){
console.log(6666666);
},
},
// 'numbers.a':{
// handle(){console.log("a被改变了")}
// }
}
})
</script>
2 解决
代码看起来没啥毛病，逻辑也是对的啊，就是报错。报错信息：watch存在错误，不能读取未声明的属性。
最后试了几次，才发现原来是handler()方法写成了handle(),怪不得一直报错。
改成这样就行了
watch:{ //监视多级结构中某个属性的变化
info:{
handler(){
console.log(6666666);
},
},
// 'numbers.a':{
// handle(){console.log("a被改变了")}
// }
三、总结
报上面这个错误说明handler函数有问题。
解决措施：
1，handler函数有没有写
2，handler有没有拼对
3，handler函数不能是箭头函数（箭头函数，this指向window）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
