实例方法 / 数据

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) {
  // 做点什么
})

// 用法二 函数
watch:{
    xxx：（newVal,oldVal)=>{     // xxx是data里的数据
    // 做点什么
    }
}

• 选项：deep

为了监听到对象内部值的变化，可以添加参数：deep:true。监听数组不需要添加。

vm.$watch('someObject', callback, {
  deep: true
})

• 选项：immediate

添加参数：immediate:true后，将立即触发一次回调。

vm.$watch('a', callback, {
  immediate: true
})

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

• 参数：

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

• 返回值：设置的值。

• 用法：

  这是全局 Vue.set 的别名。

• 参考：Vue.set (opens new window)

vm.$delete( target, propertyName/index )

• 参数：

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

• 用法：

  这是全局 Vue.delete 的别名。

• 参考：Vue.delete (opens new window)