computed
watch
区别
computed
computed 是计算属性,它会根据你所依赖的数据动态显示新的计算结果
在vue实例初始化已近开始计算
计算属性将被加入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例
通过计算出来的属性不需要调用直接可以在 DOM 里使用
如果不使用计算属性,那么代码函数在dom里
会对页面的可维护性造成很大的影响
而且计算属性如果依赖不变的话,它就会变成缓存,computed 的值就不会重新计算
所以,如果数据要通过复杂逻辑来得出结果,那么就推荐使用计算属性
watch
一个对象,键是 data 对应的数据,值是对应的回调函数。值也可以是方法名,或者包含选项的对象,当 data 的数据发生变化时,就会发生一个回调,他有两个参数,一个 val (修改后的 data 数据),一个 oldVal(原来的 data 数据)
Vue 实例将会在实例化时调用$watch(),遍历 watch 对象的每一个属性
注意:不应该使用箭头函数来定义 watcher 函数,因为箭头函数没有 this,它的 this 会继承它的父级函数,但是它的父级函数是 window,导致箭头函数的 this 指向 window,而不是 Vue 实例
优化 局部变量
computed: {
res({ start, end, arr}) {
let result = start
for (let i = 0; i < 1000; i++) {
result += 2
...
}
return res
},
},
而优化后的组件会在计算前先用局部变量 start, end, arr
,缓存起来,后面直接访问。
优化前后的组件的计算属性 result 的实现差异,优化前的组件多次在计算过程中访问this.{ start, end, arr}
为什么 局部变量好一点,原因是你每次访问 this.base 的时候,由于 this.{ start, end, arr}
是一个响应式对象,所以会触发它的 getter,进而会执行依赖收集相关逻辑代码。类似的逻辑执行多了,像示例这样,几百次循环更新几百个组件,每个组件触发 computed 重新计算,然后又多次执行依赖收集相关逻辑,性能自然就下降了。
是一个非常实用的性能优化技巧。因为很多人在开发 Vue.js 项目的时候,每当取变量的时候就习惯性直接写 this.xxx 了.在访问次数不多的时候,性能问题并没有凸显,但是一旦访问次数变多,比如在一个大循环中多次访问,类似示例这种场景,就会产生性能问题了。