认知watch和computed的区别以及选择

terry VueJs 157

两个重要API,反应应聘者熟练程度。

思路分析

  1. 先看两者定义,列举使⽤上的差异
  2. 列举使⽤场景上的差异,如何选择
  3. 使⽤细节、注意事项
  4. vue3变化

回答范例

  1. 计算属性可以从组件数据派⽣出新数据,最常⻅的使⽤⽅式是设置⼀个函数,返回计算之后的结果,
    computed和methods的差异是它具备缓存性,如果依赖项不变时不会重新计算。侦听器可以侦测某个响应
    式数据的变化并执⾏副作⽤,常⻅⽤法是传递⼀个函数,执⾏副作⽤,watch没有返回值,但可以执⾏异步操
    作等复杂逻辑。
  2. 计算属性常⽤场景是简化⾏内模板中的复杂表达式,模板中出现太多逻辑会是模板变得臃肿不易维护。侦听
    器常⽤场景是状态变化之后做⼀些额外的DOM操作或者异步操作。选择采⽤何⽤⽅案时⾸先看是否需要派⽣
    出新值,基本能⽤计算属性实现的⽅式⾸选计算属性。
  3. 使⽤过程中有⼀些细节,⽐如计算属性也是可以传递对象,成为既可读⼜可写的计算属性。watch可以传递对
    象,设置deep、immediate等选项。
  4. vue3中watch选项发⽣了⼀些变化,例如不再能侦测⼀个点操作符之外的字符串形式的表达式; reactivity API中新出现了watch、watchEffect可以完全替代⽬前的watch选项,且功能更加强⼤。
  • 暂无回复内容