computed
1 .计算属性是基于他们的依赖进行缓存,只有相关依赖发生改变的时候才会重新求值
2 .对于同步数据的处理
3 .能用computed的时候尽量使用computed,这样避免数据的杂乱。
4 .替代模板内的表达式,或者data值的任何复杂逻辑都应该使用computed来计算
5 .分离逻辑:
6 .双向绑定:使用计算属性的getter和setter实现数据的双向绑定。
7 .当computed用到的data值发生变化时,视图更新调用computed值会重新执行,获得新的计算属性
8 .更接近于data数据,只是对data数据进行一些加工,计算,类似于过滤器,对绑定到视图的数据进行处理,并监听变化而执行对应的方法。
9 .computed里面定义的函数是不能和data,prop重合的
10 .计算属性和调用方法的区别:计算属性是基于缓存进行更新,但是调用方法是每当触发重新渲染的时候,都会调用。当有一个性能开销较大的计算属性,他需要遍历一个巨大的数组并做大量的计算
11 .计算属性可以添加setter,但是感觉没有必要,因为添加的属性可以直接在data里面变化,getter里面也是实时响应的。
实现本质lazy-watch
1 .
watch
1 .当你有一些数据需要随着其他数据变动而变动时,观察某个值的变化去完成一段开销比较大的复杂业务的逻辑。
2 .可以执行异步操作,限制操作的频率,设置中间状态,这些都是计算属性都无法做到的
高级用法
1 .handler方法,immediate:初始化的时候就执行
2 .deep:嵌套的属性观察的时候,里面层级的数据变化的监测需要这个操作,但是会有性能问题,因为是深度遍历,所以性能开销比较大
3 .obj.a:这样使用字符串的方式来优化,可以精准的定位到某一个属性,大大加快了速度
4 .不写在组件里面的watch方法,在不用的时候要销毁watch,不然会造成内存溢出。