Vue中的watch是什么？怎么用？

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、watch是什么？

• 官方介绍
  

• watch是一个观察的动作

• 用于监听data里面的数据变化，并根据变化进行其他的操作

---

二、watch的使用

1.基本使用

代码如下（示例）：

new Vue({
        el: '#app',
        data: {
            id: ''
        },
        watch: {
            id(newVal, oldVal) {
            // 监听 id 属性数据变化，只要 id 的值发生变化,这个方法就会被调用
    		// newVal : 新值 
    		// oldVal : 旧值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }
    })

2.immediates属性 (立即处理 进入页面就触发)

• 在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

代码如下（示例）：

new Vue({
        el: '#app',
        data: {
           u_id: 108
        },
        watch: {
            u_id: {
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 进入页面就触发
                immediate: true
            }
        }
    })

3.深度监听（deep）

• watch虽可以监听，但只是浅监听，只监听数据第一层或者第二层。比如对于整个对象的监听，需要用到深度监听。
• 对象和数组属于引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。

代码如下（示例）：

new Vue({
        el: '#app',
        data: {
            obj: {
            	id: 1,
                type: 'mo'
			}
        },
        watch: {
            obj:{
　　　　			handler:function(newVal,oldVal){
　　　　
　　　　			},
	   		// 立即处理 进入页面就触发
	   		// 刷新加载 立马触发一次handler ，能初始化
                immediate: true,
                
                // 可以深度检测到 obj 对象的属性值的变化
                deep: true
　　			}
        }
    })

---

总结

1. 注意事项

• watch中箭头函数访问不到this，当watch中this.a是箭头函数时，访问不到data中的this.a，你打印出来会发现是undefined,所以watch中箭头函数访问不能用this。
• vue的watch中，最好使用function，箭头函数有局限性。访问不到外部的data！

↓

2. watch和computed区别

computed:

• 支持缓存，只有依赖数据发生改变，才会重新进行计算
• 不支持异步

watch：

• 不支持缓存，数据变，直接会触发相应的操作
• watch支持异步
• 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值

watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响