6.watch 与 computed。

1.watch 监听属性：当被监听的属性变化时，回调函数自动调用，进行相关操作。

2.监视的两种写法：一般监视data、computed、props中的数据。

• 2-1.new Vue时传入watch配置:
  • ①Vue中的 watch 默认不监测对象内部值的改变(一层)，Vue 自身可以监测对象内部值的改变。
  • ②配置 deep: true 可以监测对象内部值改变(多层)。
  • ③使用 watch 时根据数据的具体结构，决定是否采用深度监听。监听对象的某个属性使用“obj.property”字符串形式。

watch: {
  first() { // 监听变量  
    // do something
  },
  second: {          // 深度监听对象
    deep: true,        
    handler: function(newVal, oldVal) {
        //do something
    }
  },
  'third.name': {    // 深度监听对象上的某个属性
    deep: true,        
    handler(newVal, oldVal) {
        //do something
    },
    immediate: true // 将立即以表达式的当前值触发回调
  },    
},

• 2-2.通过vm.$watch监视。

3.计算属性：

• 1-1.定义：要用的属性不存在，要通过已有属性计算得来。
• 1-2.原理：底层借助了Object.defineProperty方法提供的getter和setter。
• 1-3.get函数执行时间：
  • ①初始读取时执行一次。
  • ②当依赖的数据发生改变时会被再次调用。
• 1-4.优势：与methods中的方法相比，内部有缓存机制，界面重复执行计算属性不会多次调用get方法。
• 1-5.计算属性会出现在vm上，直接读取使用即可。
• 1-6.如果计算属性要被修改，那必须写set函数去响应修改。且set中要修改的是要引起计算时依赖的数据发生变化。
• 1-7.书写：

computed: {
  // 仅读取
  aDouble() {
    return this.a * 2
  },
  // 读取和设置
  aPlus: {
    get: function () {
      return this.a + 1
    },
    set: function (v) {
      this.a = v - 1
    }
  }
}