详解Vue中的Watch监听

Watch

本文将从以下方面讲解个人理解的Watch监听

1、普通Watch与监听事件回调

2、深度监听：deep

3、初始化时触发：immediate

4、Watch与Computed的区别

在官方的原话是

字面意思，watch是一个对象，对象中的 键 是 需要被监听的表达式（在data中声明的或是父组件传递props中的数据），值 是 对应固定的回调函数，或者是一个定义在methods中的方法名称。

实例化的时候会调用 $watch() 去遍历你在watch中设置的所有属性（键：值）

1、普通Watch与监听事件回调

普通监听举例：

		data(){
   
            return{
   
                a: 1
            }
        },
        watch: {
   
            a: function (newVal, oldVal) {
    //两个参数为固定格式
            	//newVal为监听到变化后的数据
            	//oldVal为变化前的数据
                console.log('更改后的数据：',newVal, "更改前的数据：",oldVal)
            },
        },
        methods:{
   
            getChange(){
    // 当前方法执行后，触发watch中的打印内容
                this.a = 2
            }
        }

也就是说，当你改变了data中声明的数据时，就会立即触发你在watch中设置的回调方法

watch值为方法名举例：

		data(){
   
            return{
   
                a: 1
            }
        },
        watch: {
   
            a: 'watchCallback', // 此为methods中定义的方法名称，不加this，且需要引号
        },
        methods:{
   
            getChange(){
   
                this.a = 2