Vue的计算属性和监听属性简述

1. Computed（计算属性）

   computed是计算属性，类似于过滤器，对绑定到视图的数据进行处理，并监听变化进而执行对应的方法

   • computed是计算属性，也就是计算值，多用于计算值的场景
   • 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
   • computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值才会重新调用对应的getter来计算。也就是说，只有依赖数据发生改变时，才会重新进行计算
   • 如果一个属性是由其他属性计算而来，这个属性依赖其他属性，一般用computed
   • 如果computed属性值是函数，那么默认会走get方法，函数的返回值就是属性的属性值，在computed中，属性都有一个get和set方法，当数据变化时调用set方法
   • computed适用于计算比较消耗性能的计算场景

2. Watch

   watch是一个侦听的动作，用来观察和响应Vue实例上的数据变动

   • 更多的是"观察"的作用，类似于某些数据的监听回调，用于观察props、$emit或者本组件的值，当数据来回变化时来执行回调进行后续操作
   • 无缓存性，页面重新渲染时值不变化也会执行
   • watch支持异步
   • 监听的函数接收两个函数，第一个参数是新值，第二个参数是旧值
   • 当一个属性发生变化时，需要执行对应的操作
   • 浅监听，引用类型拿不到oldvalue，需要使用handler、deep:true

   属性：handler、immediate、deep

   由于JavaScript的限制，Vue无法检测到以下数组变动

   • 当使用索引直接设置一项时，例如vm.items[indexOfItem] = newVal
   • 当修改数组长度时，例如vm.items.length = newLength

3. 小结

   • 当要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed
   • 如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化