VUE中watch用法

一、 watch是什么？

监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。
简洁的说：watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

二、应用

**当watch检测对象/数组的情况

<template>
    <div>
        <p>a: {{a}}</p>
        <p>a: <input type="text" v-model="a"></p>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data(){
            return{
               a:'2'
            }
        },
        watch: {
            a: {
                handler(newVal, objVal) {
                        console.log(11);
                },
            }
        }
    }
</script>

控制台打印如下

image.png

watch中deep属性

当监测为对象的时候（非数组情况），deep = true 可以监测对象中属性的变化，并且（监测为对象的时候，newVal == oldVal）

<template>
    <div>
        <p>obj.a: {{obj.a}}</p>
        <p>obj.a: <input type="text" v-model="obj.a"></p>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data(){
            return{
                obj:{
                    a:'初始值'
                }
            }
        },
        watch: {
            obj: {
                handler(newVal, objVal) {
                   // if(newVal.obj || objVal.obj != objVal.obj){
                    //    console.log(22);    //控制台并没有打印   监测为对象的时候，newVal == oldVal
              //      }
                          console.log(33)    //打印为33
                },
                deep:true
            }
        }
    }
</script>

image.png

watch中immediate属性

进入组件的时候，第一次并不会执行watch，是因为immediate 默认 false
当 immediate = true 的时候，进入组件会立即执行。并且可以监测到组件传递数据。

最后一点，在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域