Vue 进阶面试题, Vue 中的 watch 怎么深度监听对象变化?

Step 1

Q:: Vue 中的 watch 怎么深度监听对象变化？

A:: 在 Vue 中，watch 选项可以用来监听数据的变化。默认情况下，watch 只能监听对象的引用变化，而不能监听对象内部属性的变化。如果需要监听对象内部属性的变化，可以通过设置 deep 选项为 true 来实现深度监听。示例代码如下：

 
watch: {
  someObject: {
    handler(newVal, oldVal) {
      // 对象内部属性变化时的处理逻辑
    },
    deep: true
  }
}
 

需要注意的是，深度监听会带来性能开销，只有在确实需要的时候才使用。

Step 2

Q:: 在 Vue 中使用 watch 的常见场景有哪些？

A:: 1. 监听某个数据的变化并执行特定操作，例如表单数据校验。 2. 监听路由参数的变化，基于参数变化执行相应操作。 3. 监听父组件传递的 prop 数据，子组件基于 prop 变化做出响应。 4. 监听异步数据请求的结果，处理请求完成后的逻辑。

Step 3

Q:: 在 Vue 中，deep 监听和 computed 的区别是什么？

A:: deep 监听和 computed 都是 Vue 中常用的响应式特性，但它们的使用场景不同。deep 监听是通过 watch 深度监听对象内部属性的变化，而 computed 是基于依赖数据自动计算新的属性值。通常，computed 更适合用来定义依赖于其他数据的属性，具有缓存功能，而 watch 更适合执行副作用操作，例如异步请求或手动 DOM 操作。