关于 computed

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 了.在访问次数不多的时候，性能问题并没有凸显，但是一旦访问次数变多，比如在一个大循环中多次访问，类似示例这种场景，就会产生性能问题了。