Computed - 计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
下面是一个展示用户名的例子
如果我们想要在页面的其它地方展示用户的用户名、邮箱、手机号，我们在模板中操作会导致代码难以维护
对于复杂的逻辑，我们使用计算属性
来看另一个例子
列表的展示：
**
上面的代码中有重复的地方，我们把 displayUsers 改成计算属性，用哈希表存储性别
计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。
computed vs methods
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
watch - 监听
当数据变化时，执行一个函数。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
computed 与 watch 的区别
- computed 是计算属性，watch 是监听
- computed 是用来计算出一个值的，这个值我们在调用的时候不需要加括号，你可以当属性用。还有就是计算属性根据依赖进行缓存，如果依赖不变，computed 的值就不会再重新计算
- watch 是用来监听的，它有两个选项。第一个是 immediate ，表示在第一次渲染的时候是否执行函数。另一个是 deep ，意思是如果我们要监听一个对象，那么我们是否要监听这个对象里面属性的变化。如果某个属性变化了，就去执行一个函数
- 这就是 computed 和 watch 的区别
若有收获，就点个赞吧
0 人点赞
