Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。
如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。
下面写两个demo,参考例子来了解一下
1 <template> 2 <div> 3 <el-input v-model="demo"></el-input> 4 {{value}} 5 </div> 6 </template> 7 <script> 8 export default { 9 name: 'index', 10 data() { 11 return { 12 demo: '', 13 value: '' 14 }; 15 }, 16 watch: { 17 demo(val) { 18 this.value = this.demo; 19 } 20 } 21 }; 22 </script>
上面这个就浅显易懂了,通过watch来直接监测demo,如果demo的值变化,value的值也会跟着一起变化。
immediate和handler
这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
1 watch: { 2 demo(val) { 3 handler() { 4 this.value = this.demo; 5 }, 6 immediate: true 7 } 8 }
例子二:
1 <template> 2 <div> 3 <el-input v-model="demo.name"></el-input> 4 {{value}} 5 </div> 6 </template> 7 <script> 8 export default { 9 name: 'index', 10 data() { 11 return { 12 demo: { 13 name: '' 14 }, 15 value: '' 16 }; 17 }, 18 computed: { 19 newName() { 20 return this.demo.name; 21 } 22 }, 23 watch: { 24 newName(val) { 25 this.value = val; 26 } 27 } 28 }; 29 </script>
上面这个例子,如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成。
例子三:
1 <div id="app"> 2 <input type="text" v-model="childrens.name" /> 3 <input type="text" v-model="lastName" /> 4 </div> 5 6 <script type="text/javascript"> 7 var vm = new Vue( { 8 el: '#app', 9 data: { 10 childrens: { 11 name: '小强', 12 age: 20, 13 sex: '男' 14 }, 15 tdArray:["1","2"], 16 lastName:"张三" 17 }, 18 watch:{ 19 childrens:{ 20 handler:function(val,oldval){ 21 console.log(val.name) 22 }, 23 deep:true//对象内部的属性监听,也叫深度监听 24 }, 25 'childrens.name':function(val,oldval){ 26 console.log(val+"aaa") 27 },//键路径必须加上引号 28 lastName:function(val,oldval){ 29 console.log(this.lastName) 30 } 31 },//以V-model绑定数据时使用的数据变化监测 32 } ); 33 vm.$watch("lastName",function(val,oldval){ 34 console.log(val) 35 })//主动调用$watch方法来进行数据监测 36 </script> 37 </body>
数组的变化,不需要深度watch。