vue之watch篇

简介 ：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在<span style="color:red">数据变化时执行异步或开销较大的 *** 作时</span>，这个方式是最有用的。

注意点 ：<span style="color:red">不应该使用箭头函数来定义 watcher 函数</span>

watch中的几个常见属性 :

可以在watch中执行复杂的异步 *** 作等；这些是computed不能胜任的。具体可以参考官网的案例

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

语法 ： vm.$watch( expOrFn, callback, [options] )

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

注意 ：组件选项中的watch中可以随着组件的销毁而销毁，而实例方法的 vm.$watch() ，我们需要手动销毁

  当firstName值变化时，watch监听到并且执行

  上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了 handler 和 immediate 属性

  我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

  默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值：

  那么我们需要监听obj里的属性a的值呢？这时候deep属性就派上用场了:

  这样的方法对性能影响很大，修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理：

  watch的注销这里就不在多说了，实际开发中，watch会随着组件一并销毁。

title: vue-watch数组和对象

date: 2017-03-21

本文通过示例介绍vue如何监听数组和对象的变化。

数组更新检测

这部分仅支持通过下列方法 *** 作数组

针对array[index]=newVal可采用Vue.set(array, index, newValue)或者array.splice(index, 1, newValue)代替；

针对array.length=newVal可采用array.splice(newLength)代替；

watch选项

实例watch

响应式原理/变化检测

watch选项”watch vue实例data中的“对象属性”变化：

vue实例watch data中的“对象属性”变化：

如果希望在过程中添加响应式对象属性，则可通过Vue.set(obj,'propetyName',val)或者vm.$set(obj,'propetyName',val)

如果希望在过程中批量添加响应式对象属性，可采用this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })；此时，handler函数接收的oldVal是原obj，newVal是变化后的obj；

监听数组中对象的变化：

说明：配置了deep为true后，vue会监听对象属性的变化，如果对象属性是引用类型的，则会深入监听，深入监听的规则与以上监听数组、对象规则一致，如：

arr[0].a.b.c.push(3)会被监听到

vm.$set(vm.arr[0].a.b,'propetyName',val)会被监听到

等等……

---