学习笔记:https://blog.csdn.net/qq_41370833/article/details/123745232
| - | computed | watch |
|---|---|---|
| 意图 | 根据已有属性计算出新的属性 | 监视已有属性 |
| 写法 | conputed中的函数必须将新的属性用return返回 | watch中的函数不是必须要用return |
| 功能 | 1.初始化时调用 2.计算所依赖的数据发生变化 | 1.默认第一次加载不做监听,可以通过设置immediate让初始化时调用 2.监控数据发生变化时调用 |
| 是否支持异步 | 不支持异步，当computed内有异步操作是无法监听到数据变化的 | √ |
| 是否有缓存 | √ 页面重新渲染，值不变时，会直接返回之前的计算结果，不会重新计算 | × 没有缓存，页面重新渲染时，值不改变时也会执行 |
如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。
如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。
display:none来控制元素是否展示。| - | v-if | v-show |
|---|---|---|
| 本质 | 操作DOM元素进行切换显示 | 设置css样式进行切换显示 |
| 首次渲染开销 | 较低 | 较高 |
| 切换开销 | 较高 | 较低 |
| 适用场合 | 不频繁切换 | 频繁切换 |
| 对生命周期的影响 | 会影响 | 不会影响 |
beforeUpdate和updated钩子函数。beforeCreate，created，beforeMount，mounted钩子。beforeDestroy和destroyed钩子函数。