<template>
<div>
<input type="text" v-model="value">
</div>
</template>
<script>
export default {
data() {
return {
value:null
}
},
created(){
this.test()
},
methods: {
test(){
console.log("第一个加载")
}
},
watch: {
value(val){
this.test()
}
},
}
</script>
上面的代码的效果是，页面第一次加载需要调用test方法，每次输入都要调用test方法
可以使用handler方法和immediate属性进行优化
immediate:true代表如果在 wacth 里声明了 test 之后，就会立即先去执行里面的handler方法，
如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
watch: { value:{ handler:‘test‘, immediate:true }, },
这样可以每次输入调用test方法，当然要是你需要每次拿到值也可以这样写
watch: { value:{ //handler:‘test‘, handler(val){ console.log(val) }, immediate:true }, },
deep的用法
watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，比如我们 data 里有一个obj属性：
<template>
<div>
<input type="text" v-model="obj.a">
</div>
</template>
<script>
export default {
data() {
return {
value:null,
obj:{
a:null
}
}
},
created(){
},
methods: {
test(){
console.log("第一个加载")
}
},
watch: {
obj:{
handler(val){
console.log(val)
},
immediate:true,
},
},
}
</script>
当我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的
这时候可以使用deep
watch: { obj:{ handler(val){ console.log(val) }, immediate:true, deep:true }
}
也可以使用 字符串
watch: { ‘obj.a‘:{ handler(val){ console.log(val) }, immediate:true, deep:true },
原文：https://www.cnblogs.com/mydxy/p/11488586.html