Vue面试题15：说一说Watch和computed的区别（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 思路分析：

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

• 回答范例：

  • 1.computed定义：接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象；watch定义：侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数，可以传递对象，设置deep、immediate等选项；

  • 2.计算属性可以从组件数据派生出新数据，最常见的使用方式是设置一个函数，返回计算之后的结果，computed和methods的差异是它具备缓存性，如果依赖项不变时不会重新计算。侦听器可以侦测某个响应式数据的变化并执行副作用，常见用法是传递一个函数，执行副作用，watch没有返回值，但可以执行异步操作等复杂逻辑；

  • 3.计算属性常用场景是简化行内模板中的复杂表达式，模板中出现太多逻辑会使模板变得随肿不易维护。侦听器常用场景是状态变化之后做一些额外的DOM操作或者异步操作。选择时首先看是否需要派生出新值，一般来说能用计算属性实现的方式首选计算属性；

  • 4.vue3中watch选项发生了一些变化，例如不再能侦测一个点操作符之外的字符串形式的表达式；响应式API中新出现了watch、watchEffect可以完全替代目前的watch选项，且功能更加强大；