1# computed 与 watch 的细节
（1）computed
- 缓存支持： 计算属性支持缓存，只有当依赖数据发生改变时才会重新计算；如果依赖未改变，则从缓存中读取。
- 必须有返回值： 计算属性必须包含
return语句以返回计算结果。 - 类似执行方法： 类似于一个执行方法，使用方式类似于
data中的数据，但实际上是基于依赖进行计算得到的值。 - 不支持异步操作： 无法监听内部包含异步操作的数据变化。
- 依赖关系： 计算属性是基于依赖值或
props计算得来的数据，能够实时响应数据的变化。 - 缓存机制： 计算值在
getter执行后被缓存，仅当其依赖的数据发生变化时才会重新计算。 - 灵活定义： 即使
data中没有直接声明要计算的变量，也可以直接在computed中定义，方便组织和管理相关计算逻辑。 - 默认只有
getter： 计算属性默认只具有getter，但可以在需要时自定义setter来实现更复杂的逻辑。 - 上下文绑定： 所有
getter和setter的this上下文自动地绑定为Vue实例，方便访问实例的其他属性和方法。
（2）watch
- 无缓存支持：
Watcher不支持缓存，数据变化会直接触发相应的操作。 - 支持异步操作： 可以监听并响应异步操作的数据变化。
- 数据监听器：
Watcher是一种监听器，用于监听特定数据的变化并执行相应操作。 - 参数接收： 监听函数接收两个参数，分别是最新的值和之前的值，便于在操作中对比和处理数据变化。
- 基于数据名称： 函数名必须与数据名一致，以确保正确监听指定数据的变化。
- 自动触发： 监听函数会在数据变化时自动触发，无需手动调用。
- 数据值监听： 默认只监听数据值的改变，不会监听数据地址的改变。若需要深度监听，可配合
deep: true属性实现。 - 立即执行： 若需要在页面首次加载时立即执行监听，可配合
immediate: true属性实现。
2# computed 与 watch 的区别
| 计算属性 (computed) | 监听属性 (watch) |
|---|---|
| 支持缓存 | 不支持缓存 |
计算值在 getter 执行后被缓存 | 监听函数会在数据变化时自动触发 |
计算结果基于依赖值或 props 属性 | 用于监听特定数据的变化 |
| 函数名需另起并作为计算属性 | 函数名必须与数据名一致 |
| 只有在依赖数据改变时才会重新计算属性 | 数据变化时就会直接触发监听函数 |
函数必须包含 return 语句返回计算结果 | 监听函数不需要返回值 |
| 不能监听内部包含异步操作的数据变化 | 可以监听并响应异步操作的数据变化 |
默认只有 getter 方法 | 默认只监听数据值的改变 |
getter 方法可携带参数， setter 方法参数固定为：(value) | 函数参数固定为：(newValue, oldValue) |
可结合 setter 和 getter 方法灵活控制 | 可结合 deep: true 和 immediate: true 属性实现深度监听与立即监听 |
