目录
1.作用
可以监听data/computed等属性值改变。
常见于监听某变量值的改变，或者对象中属性值的改变
2.应用场景
如监听路由变化
如当页面的数据变动需要做逻辑运算时
如组件创建时，监听某个变量或者某对象的值或属性改变时
如使用此属性判断父子组件传值发生时做逻辑。
3.用法：
注意：和data、methods同级
watch: {
"被监听的属性名" (newVal, oldVal){
}
}小结：想要监听一个属性变化, 可使用监听属性watch
4.深度监听和立即执行（监听复杂类型）
用法：
watch: {
"要监听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度监听复杂类型内变化
handler (newVal, oldVal) {
}
}
}例子：
<template>
<div>
<input type="text" v-model="user.name">
<input type="text" v-model="user.age">
</div>
</template>
<script>
export default {
data(){
return {
user: {
name: "小白",
age: 18
}
}
},
watch: { // 固定属性(设置监听哪些属性)
user: { // 具体属性名(被监听)
handler(newVal, oldVal){ // 固定触发此函数
console.log(newVal);
},
immediate: true, // 马上监听触发
deep: true // 深度监听(监听name和age值的改变)
}
}
}
</script>小结: immediate立即监听, deep深度监听, handler固定方法触发
5.总结：
最常见的业务中使用思路：
监控data中某个变量的变化==>发生变化===> 逻辑运算 ===>实现功能