标签：就是 creat http method ref span iat log vue
很多时候，我们监听一个属性，不会使用到改变前后的值，只是为了执行一些方法，这时可以使用字符串代替
data:{ name:‘Joe‘ }, watch:{ name:‘sayName‘ }, methods:{ sayName(){ console.log(this.name) } }
总所周知，watch是在监听属性改变时才会触发，有些时候，我们希望在组件创建后watch能够立即执行一次。
可能想到的的方法就是在create生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法
data:{ name:‘Joe‘ }, watch:{ name:{ handler: ‘sayName‘, immediate: true } }, methods:{ sayName(){ console.log(this.name) } }
上面我们给入一个对象
handelr： 触发监听执行的方法（需要用到改变前后的值时，可换成函数）
immediate： 监听开始之后被立即调用
在监听一个对象时，当对象内部的属性被改变时，无法触发watch，我们可以继续使用对象的方式为其设置深度监听
data:{ studen: { name:‘Joe‘, skill:{ run:{ speed: ‘5m/s‘ } } } }, watch:{ studen:{ handler: ‘sayName‘, deep: true } }, methods:{ sayName(){ console.log(this.studen) } }
设置deep为true后，无论嵌套多深，只要属性值被改变都会触发监听
使用数组可以设置多项，形式包括字符串、函数、对象
data:{ name:‘Joe‘ }, watch:{ name:[ ‘sayName1‘, function(newVal, oldVal){ this.sayName2() }, { handler: ‘sayName3‘, immaediate: true } ] }, methods:{ sayName1(){ console.log(‘sayName1==>‘, this.name) }, sayName2(){ console.log(‘sayName2==>‘, this.name) }, sayName3(){ console.log(‘sayName3==>‘, this.name) }, }
watch文档：https://cn.vuejs.org/v2/api/#watch
标签：就是 creat http method ref span iat log vue
原文地址：https://www.cnblogs.com/chanwahfung/p/11487578.html
