有关watch
- 组件的可见性对watch的执行没有直接影响
- 无论组件是否可见,watch监听的数据只要发生变化就会执行
- watcher 之间没有顺序,如果有顺序依赖
- 重新设计,改为computed 或者mounted
- 使用vuex等本地数据
- 没有设置immediate,不会在组件初始化时立即执行。而是观察的数据变化的时候执行
- 设置了:会立即执行一次
有关computed
- 依赖的数据发生变化,计算属性会重新计算,并缓存结果
- 在模板表达式中:mounted 阶段之后执行
- 组件渲染过程计算,并根据响应数据自动更新
默认情况下,computed先于watch执行,watch可能会间接导致computed重新计算
| 区别 | computed | watch |
|---|---|---|
| 定义 | 声明性的描述一些数据依赖关系 | 用于观察和响应vue实例上数据的变化 |
| 调用时机 | 依赖数据发生变化,计算属性会重新计算 | 当被侦听的数据发生变化,执行对应的对调函数 |
| 缓存机制(性能) | 有缓存 | 无缓存 |
| 异步支持 | 不支持异步,所以不要ajax请求 | 支持异步 |
| 数据关系 | 适合一个数据被多个数据影响 | 一个数据影响多个数据 |
| 执行时机 | 默认会立即执行 | 默认不会立即执行配置 immediate = true 可立即执行 |
| 使用场景 | 适合执行较为复杂的计算逻辑,并且这些计算逻辑依赖于其他响应式数据 | 适合在数据变化时执行复杂的逻辑或异步操作 |