计算属性 VS 监听属性

Computed

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

1. computed 是计算属性，也就是计算值，它更多用于计算值的场景
2. computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算
3. computed适用于计算比较消耗性能的计算场景

Watch

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

1. 更多的是「观察」的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作
2. 无缓存性，页面重新渲染时值不变化也会执行
3. 浅监听，引用类型拿不到oldValue，需要使用handler、deep: true

属性：handler、immediate、deep

小结:

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