粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

computed

computed虽然写法上像个函数，但是实际上是计算属性。它会根据data数据的数据对象做计算处理，就类似于getter跟setter一样创造一个存取器属性。它有个特点，就是Vue内部做了缓存处理，只有它的依赖属性发生了变化，它才会重新计算并且触发渲染。否则不会再次触发计算。

写法：类型：{ [key: string]: Function | { get: Function, set: Function } }

new Vue({
  data: {
    user: {
      email: "dlxxdlcc@qq.com",
      nickname: "gg",
      phone: "13710101010"
    }
  },
  computed: {
    displayName: {
      get() {
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
        console.log(value);
        this.user.nickname = value;
      }
    }
  },
  // DRY don't repeat yourself
  // 不如用 computed 来计算 displayName
  template: `
    <div>
      {{displayName}}
      <div>
      {{displayName}}
      <button @click="add">set</button>
      </div>
    </div>
  `,
  methods: {
    add() {
      console.log("add");
      this.displayName = "mm";
    }
  }
}).$mount("#app");

注意：不需要加()

watch

watch翻译为观察，在vue中它是一个侦听器，会对依赖属性进行侦听（观察）。当侦听的属性发生变化时，就会执行一个函数。

写法：{ [key: string]: string | Function | Object | Array }

1、wtach有俩个属性：

immediate 是否在第一次渲染时执行这个函数，会在监听开始之后就立即本调用。
deep 是否要看这个对象里面的属性变化。以下是变化代码示例：

let vm = new Vue({
    data: {
        a: 1,
        b: {
            c: 2
        },
        d: {
            e: {
                f: 3
            }
        },
    },
    watch: {
        a(newvalue, oldValue) {
            console.log( 'a变了')
        },
        b: {
            handler: function (v, oldv) {
                console.log("b变了")
            },
            immediate: true //在侦听开始时就调用回调函数
        },
        'b.c': function (v, oldv) {
            console.log("b.c变了")
        },
        d: {
            handler: function (v, oldv) {
                console.log("d变了")
            },
            deep: true // 深侦听，只要d、d.e包括d.e.f发生变化都会侦听到
        }
    }
})
// vm.b 变了
vm.a=2 //a变了
vm.b={c:2} // b变了
vm.b={c:2,x:3} //b变了
vm.b={c:3} //b 变了  b.c变了
vm.b.c=100 //b.c变了
vm.d.e.f=4 //d变了

2、$nextTick

值得注意的是，watch是异步函数，如果我们的属性需要在侦听后再执行某个变化,可以使用$nextTick这个API。

以下是侦听代码示例：

new Vue({
  data: {
    n: 0,
    history: [],
    inUndoMode: false
  },
  watch: {
    n: function(newValue, oldValue) {
      console.log(this.inUndoMode);
      if (!this.inUndoMode) {
        this.history.push({ from: oldValue, to: newValue });
      }
    }
  },
  // 不如用 computed 来计算 displayName
  template: `
    <div>
      {{n}}
      <hr />
      <button @click="add1">+1</button>
      <button @click="add2">+2</button>
      <button @click="minus1">-1</button>
      <button @click="minus2">-2</button>
      <hr/>
      <button @click="undo">撤销</button>
      <hr/>

      {{history}}
    </div>
  `,
  methods: {
    add1() {
      this.n += 1;
    },
    add2() {
      this.n += 2;
    },
    minus1() {
      this.n -= 1;
    },
    minus2() {
      this.n -= 2;
    },
    undo() {
      const last = this.history.pop();
      this.inUndoMode = true;
      console.log("ha" + this.inUndoMode);
      const old = last.from;
      this.n = old; // watch n 的函数会异步调用
      this.$nextTick(() => {
        this.inUndoMode = false;
      });
    }
  }
}).$mount("#app");

总结

computed是计算属性，watch是监听。
computed在调用值的时候不需要加括号，可以当属性用；而且它根据依赖会自动缓存，即如果依赖不变，computed的值就不会被重新计算。
watch有两个选项，immediate表示是否在第一次渲染的时候要执行这个函数，deep表示如果我们监听一个对象我们是否要看更深层次的变化。如果你需要在某个数据变化时做一些事情，使用watch。