vue note about watch

vue note 续篇 watch

watch

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

1
2
3
4
5
6
7

watch: {
   // 如果 data的`question` 发生改变，这个函数就会运行
   question: function (newQuestion, oldQuestion) {
     this.answer = 'Waiting for you to stop typing...'
     this.dosomthing()
   }
 },

实例方法

1
2
3
4
5
6
7
8
9

vm.$watch( expOrFn, callback, [options] )
参数：

{String | Function} expOrFn
{Function | Object} callback
{Object} [options]
	{Boolean} deep
	{Boolean} immediate
返回值：{Function} unwatch

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

1. 实例

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   // 键路径 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()

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

   1 2 3 4 5

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

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

   1 2 3 4

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

computed

对于任何复杂逻辑，你都应当使用计算属性。

computed和方法差不多调用也只有一个括号差别，但是计算属性是基于它们的响应式依赖进行缓存的 只在相关响应式依赖发生改变时它们才会重新求值，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数,如果你有一个for循环计算，调用次数较多就可以考虑用计算属性

封面

Matt Hardy