10. Vue实例中处理数据的方法

1. vm.$watch( expOrFn, callback, [options] )——观察 Vue 实例上的一个表达式或者一个函数计算结果的变化

• 参数：

  • {string | Function} expOrFn

  • {Function | Object} callback

  • {Object} [options]
    

    • {boolean} deep
    • {boolean} immediate

• 返回值：{Function} unwatch

• 用法：

  观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。

  注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

• 示例：

  // 键路径
    vm.$watch("x.y.z", function(newVal, oldVal) {
      // 做点什么
      console.log("z=", newVal);
    });
  
    // 函数
    vm.$watch(
      function() {
        // 表达式 `this.a + this.b` 每次得出一个不同的结果时
        // 处理函数都会被调用。
        // 这就像监听一个未被定义的计算属性
        return this.a + this.b;
      },
      function(newVal, oldVal) {
        // 做点什么
        console.log(`${this.a} + ${this.b}=${newVal}`);
      }
    );
  

  

  vm.$watch 返回一个取消观察函数，用来停止触发回调：

  var unwatch = vm.$watch('a', cb)
  // 之后取消观察
  unwatch()
  

  

• 选项：deep——发现对象内部值的变化

  为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

  vm.$watch('someObject', callback, {
    deep: true
  })
  vm.someObject.nestedValue = 123
  // callback is fired
  

• 选项：immediate——立即以表达式的当前值触发回调

  在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

  vm.$watch('a', callback, {
    immediate: true
  })
  // 立即以 `a` 的当前值触发回调
  

  注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

  // 这会导致报错
  var unwatch = vm.$watch(
    'value',
    function () {
      doSomething()
      unwatch()
    },
    { immediate: true }
  )
  

  如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：

  var unwatch = vm.$watch(
    'value',
    function () {
      doSomething()
      if (unwatch) {
        unwatch()
      }
    },
    { immediate: true }
  )
  

  

  

2. vm.$set( target, propertyName/index, value )——全局 Vue.set 的别名

• 参数：

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

• 返回值：设置的值。

• 用法：

  这是全局 Vue.set 的别名。

  

  

• 参考：Vue.set

3. vm.$delete( target, propertyName/index )——全局 Vue.delete 的别名

• 参数：

  • {Object | Array} target
  • {string | number} propertyName/index

• 用法：

  这是全局 Vue.delete 的别名。

  

• 参考：Vue.delete