持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
本文介绍computed和watch在使用上的区别，有一个汇总的表格，还有两点小建议
1. computed
- 计算属性，必须要有一个返回值。computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
- 具有缓存性。computed计算属性就是为了简化template里面模版字符串的计算复杂度、防止模版太过冗余。
- 监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算
- 适⽤于计算⽐较消耗性能的计算场景
2. watch
- 不一定要返回某个值，它更多的是起到 “观察” 的作⽤，类似于对数据进行变化的监听并执行回调。主要⽤于观察 props 或 本组件 data 的值，当这些值发生变化时，执⾏处理操作
- 不具有缓存性。它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据，
- 监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作
除此之外，还有一点很重要的区别: 计算属性不能执行异步任务，计算属性必须同步执行。(定义的函数接收return的结果，return属于同步执行的，是没办法拿到异步请求结果的)
| 区别 | 侦听目标 | 执行区别 | 监听区别 |
|---|---|---|---|
| computed | 自己定义的变量 | 不能执行异步任务 | 监听属性值 |
| watch | vue实例(data里面的值) | 可以执行异步任务(可以检测computed) | 监听依赖值(依赖不变缓存复用) |
建议
- 当目的是进⾏数值计算，且依赖于其他数据，那么推荐使用 computed
- 当需要在某个数据发生变化的, 同时做⼀些稍复杂的逻辑操作，那么推荐使⽤ watch
