computer与watch
前言: 普通监听对象就是监听他的内存地址
computer
具有get和set方法;而且具有缓存(依赖属性不变则不会重新执行函数,性能更好)。
- set接收一个newVal
- 缓存的原理:https://juejin.im/post/5e8fd7a3f265da47c35d7d29#comment
watch
通过handler与deep: true来支持深度监听,通过immediate首次监听。
注意1:handler里的this指向问题,不能使用箭头函数;
- 使用了箭头函数this就不会指向当前的vueComponent对象
注意2:如果需要监听对象的属性变化,需要使用deep:true
- 前提是这个属性已经存在于对象中,如果不存在则需要使用this.$set才行
注意3:监听对象时,拿不到oldValue,因为指向同一内存地址;
注意4:监听数组时,直接操作数组的下标或更改长度,就算是加 deep: true 也是监听不到的。
其实变异方法就是会改变原数组的方法,非变异方法则不会改变原数组
- 数组的7个变异方法: push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- 非变异方法:concat() 和 slice()、join()等 以下有效
- this.$set( this.arr, '0', 666)
- 结论:监听数组也是监听它的内存地址,但是deep加不加都是无所谓的。
扩展:Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
什么时候用?:
- 1.如果一个数据依赖于其他数据做计算,那么把这个数据设计为computed的.
- 2.如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化.