Vue中的watch监听器的简单理解

Vue中的watch监听器的简单理解

1.handler属性和immediate属性
先上代码一眼明了

        <p>fullName:{{fullName}}</p>
        firstName:<input type="text" v-model="firstName">
        <br>
        lastName:<input type="text" v-model="lastName">
        watch:{
            firstName:{
                handler(){  
                    this.fullName = this.firstName + this.lastName;
                },
                immediate:true,  
            },
            lastName:{
                handler(){
                    this.fullName = this.firstName + this.lastName;
                },
                immediate:true,
            }

        }

watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？
这时候就需要用到handler属性和immediate属性，immediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

2.deep属性

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听

<p>obj.a:{{obj.a}}</p>
obj.a:<input type="text" v-model="obj.a">
 watch:{
            obj:{
                handler(newName,oldName){
                    console.log('obj.a changed')
                },
                immediate:true,
                deep: true
            }

        }

按我自己的理解，这里的obj是一个对象，监听属性只能监听到obj这个对象，想要监听到对象里面属性的变化就需要用到deep这个属性来控制

3. 注销watch

为什么要注销 watch？因为我们的组件是经常要被销毁的，比如我们跳一个路由，从一个页面跳到另外一个页面，那么原来的页面的 watch 其实就没用了，这时候我们应该注销掉原来页面的 watch 的，不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。

但是，如果我们使用下面这样的方式写 watch，那么就要手动注销了

const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
 
unWatch(); // 手动注销watch

原文链接：点击打开