watch监听函数

定义

用来监听数据的变化，监听data里面的数据是否被修改，当数据被修改时，会触发watch中的监听函数。

 

相关属性

immediat：当值第一次进行绑定时候，是不会执行监听函数的，只有当值发生改变的时候才会执行，如果需要第一次绑定的时候也能执行函数，需要使用到immediate属性，并且设置为true，默认是false。
deep：普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能监听到变化，此时需要使用到deep属性进行深度监听，deep用来设置对象的监听函数是否会被该对象中属性的监听函数所触发，默认为false。

 

注意事项

1.数组的变化不需要深度监听。
2.在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域，对于箭头函数来说，箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的window对象。
3.watch不仅仅只监听页面内定义的值的变化，还能监听props、vuex中状态值的变化。
4.watch监听的函数接受两个参数，第一个是新值，第二个是旧值。

 

computed和watch区别

computed是计算属性，watch是监听属性
1.计算属性的get必须要有return，而监听属性非强制性，可要可不要。
2.计算属性具有缓存的效果，多次使用只会调用一次，只有依赖数据发生改变才会重新计算，而监听属性没有缓存。
3.计算属性可以自定义名称，而监听属性只能监听和data里面的名称相同。
4.计算属性适用于复杂的运算，而监听属性适合一些消耗性功能，比如Ajax。如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，多对一或者一对一，一般用computed，当一个属性发生变化时，需要执行对应的操作，一对多，一般用watch。
5.computed不支持异步，watch支持异步。

 

示例代码

<template>
  <div>
    {{str}}
    {{obj}}
    <button @click='btn'>按钮</button>
  </div>
</template>
<script>
  export default {
    name:'A',
    data () {
      return {
        str:'123',
        obj:{
          a:1
        },
        array: [1,2,3,4,5]
      }
    },
    methods:{
      btn(){
        this.str = '456';
        this.obj.a = 2;
        /**
         * 当我们想要更改数组中的值的时候，
         * this.array[0] = '10',是没有办法修改的
         * 因为vue的数据双向绑定中，调用的是set和get函数，
         * 但是在数组里面没有这两个函数
         * 所以我们只能使用vue封装的$set和push方法
         */
        this.$set(this.array,0,'10');
      }
    },
    watch:{
      str(newValue,oldValue){
        console.log(newValue,oldValue);
      },
      str:{
        handler(newValue,oldValue){
          console.log(newValue,oldValue);
        }
      },
      'obj.a':{
        handler(newValue,oldValue){
          console.log('obj.a',newValue,oldValue);
        },
        immediate:true,
        deep:true
      }
    }
}
</script>

 

 

 

 

 

 

 

 

 

 

若有收获，就点个赞吧