watch

监听数据

watch最常见的用法就是监听数据，在监听的数据发生改变时做一些事情。

// DOM
<span>{{obj.a}}</span>
<button @click="changeA">click me</button>

data() {
    return {
      name: 'a'
    };
  },
  watch: {
    name: function(value,oldValue) {
        console.log(value, oldValue);
    }
  },
  methods: {
      changeA() {
          this.name = this.name + 'a';
      },
  },

deep

然而，当我们监听的数据是比较深层次，比如要监听的数据是一个对象，就需要用到deep这个属性,属性默认为false;

我之前比较有误解的地方就是，总是会以为如果监听的数据如果是在一个对象中，就压使用deep;

要切记，‘深层次’讲的是要监听的数据的值层次深，而不是数据本身处于一个比较深的位置。

 data(){
    return {
      obj: {
        a: 'a'
      }
    }
  },
  watch: {
    obj: {
      deep: true,
      handler: function () {
        console.log( 'a:'+ this.obj.a );
      }
    }
  },
  methods: {
    changeA: function () {
      this.obj.a += 'a';
    }
  }

immediate

immediate相对来说是我不常用到的属性，指定 immediate: true ，监听会以初始化值触发回调，属性默认值是false；

data(){
    return { 
      a: '-'
    }
  },
  watch: {
    a: {
      immediate: true,
      handler: function () {
        console.log( 'a:'+ this.a );
      }
    }
  },

在这里插入图片描述

computed

computed是计算属性，依赖一部分数据，当它任何一个依赖发生改变时，都会重新计算。

data(){
    return { 
      b: 1,
      c: 2
    }
  },
  computed: {
    'a':  function () {
        console.log(this.b + this.c);
        return this.b + this.c;
    }
  },
  methods: {
    changeA: function () {
      this.b += 3;
    }
  }

如上，a就依赖于b和c,当其中任意一个值发生改变就会重新计算a的值。

watch 和 compute

这两个的区别还是挺明显的，首先：watch，一般一次只能监听一个数据，而computed是可以依赖多个值，但是最终计算的值只有一个。

其次，computed要计算值，所以是必须有返回的，而watch则不需要，computed会以依赖的初始值计算出计算值的初始值，并且初始值是不需要定义的。

vue-watch和computed的简单用法和区别