1、普通监听（无法监听到第一次绑定的变化）
这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。
//当text发生变化时触发
watch: {
text(newVal, oldVal) {
console.log(newVal)
}
}
2、普通监听（可以监听到第一次绑定的变化）
给 text 绑定了一个handler方法，之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。
设置immediate为true，可以在第一次绑定值的时候执行监听函数，否则只有值改变的时候才会执行。
watch: {
text: {
handler (newVal, oldVal) {
console.log(newVal)
},
immediate: true,
}
}3、深度监听（可以监听到对象内属性的变化）
设置deep: true 则可以监听到text.value的变化，此时会给text的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。文章来源：https://www.toymoban.com/news/detail-610394.html
data (){
return {
text: {
value:'一一',
}
}
},
watch: {
text: {
handler(newVal, oldVal) {
console.log(newVal)
},
immediate: true,
deep: true,
}
}
如果只需要监听对象中的一个属性值，则可以做以下优化：文章来源地址https://www.toymoban.com/news/detail-610394.html
watch: {
'text.value': {
handler(newVal, oldVal) {
console.log(newVal)
},
deep: true,
immediate: true
}
}
到了这里，关于watch监听器三种监听方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
