Vue实例方法/数据

亦凉 2024-04-17 05:57 6阅读 0赞

### Vue实例方法/数据 ###

*  vm.$watch( expOrFn, callback, \[options\] )
 *   *  unwatch()
 *  vm.$set( target, propertyName/index, value )
 *  vm.$delete( target, propertyName/index )

# vm.$watch( expOrFn, callback, \[options\] ) #

*  参数：
    
    \{string | Function\} expOrFn
    
    \{Function | Object\} callback
    
    \{Object\} \[options\]
    
        {boolean} deep
        
          {boolean} immediate
 *  返回值：`{Function} unwatch`
 *  用法：观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。
 *  注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。
 *  示例：

// 键路径
    vm.$watch('a.b.c', function (newVal, oldVal) { 
      // 做点什么
    })
    
    // 函数
    vm.$watch(
      function () { 
        // 表达式 `this.a + this.b` 每次得出一个不同的结果时
        // 处理函数都会被调用。
        // 这就像监听一个未被定义的计算属性
        return this.a + this.b
      },
      function (newVal, oldVal) { 
        // 做点什么
      }
    )
    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 }
    )

# vm.$set( target, propertyName/index, value ) #

*  参数：
    
    \{Object | Array\} target
    
    \{string | number\} propertyName/index
    
    \{any\} value
 *  返回值：设置的值。
 *  用法：

这是全局 `Vue.set` 的别名。

# vm.$delete( target, propertyName/index ) #

*  参数：
    
    \{Object | Array\} target
    
    \{string | number\} propertyName/index
 *  用法：这是全局 Vue.delete 的别名。