vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层
有时候需要侦听某个对象具体的属性,可以按下面案例进行:
<template> <div> <input type="text" v-model="obj.two"> <div>{{two}}</div> </div> </template> <script> export default { data:function(){ return { obj: { one: 1, two: 2 } } }, computed: { two:function(){ // 此时利用计算属性computed做中间层 return this.obj.two } }, watch:{ two:function(newValue, oldValue){ console.log(newValue) } } } </script>
分析:
1.data的时候,对其中的每个存在的值会进行深度遍历,创建dep
2.computed的时候会分析其中的值,然后把computed添加到了依赖值的dep通知队列里
3.这样每次this.obj.two变的时候就会通知two该执行了