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中某个变量的变化==>发生变化===> 逻辑运算 ===>实现功能
