computed和watch都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，自动调用相关函数。

———————————————————————————

computed

computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）,
例如：

computed:{
  fullName: function () { return this.firstName + this.lastName }
}

• computed擅长处理的场景：一个数据 受 多个数据影响
  例子中，函数内的任一数据（ this.firstName || this.lastName）发生改变，就会引起fullName的改变

在取用的时候，用this.fullName去取用，就和取data一样（不要当成函数调用！！）

---

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

计算属性定义：当其依赖的属性的值发生变化时，这个属性的值会自动更新；同时，与其相关的DOM也会同步更新。

(计算属性默认只有getter.)

更改了getter里使用的变量，就会触发computed的更新，前提是computed里的值必须要在模板里使用才行。

如果直接修改了计算属性中的变量，就相当于设置了它，就会触发setter。

---

watch

类似于监听机制+事件机制

• 监听某个值，该值发生变化就调用下面的函数

例如：

watch: {
  firstName: function (val) { this.fullName = val + this.lastName }
}

• watch擅长处理的场景：一个数据影响多个数据
  例子中只要firstName变化，就会触发下面的方法，使得this.fullName发生变化

———————————————————————————

• 只是对某一个值或属性进行监听的话，可以直接监听

watch:{
     a(val, oldVal){//普通的watch监听
         console.log("a: "+val, oldVal);
     },
｝

---

———————————————————————————

• 如果是对整个对象进行深层监听：

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

———————————————————————————

• 【watch 的一个特点是，最初绑定的时候是不会执行的】
  解决：

immediate: true

---

———————————————————————————