vue2 取消深度监听

在 Vue2 中，可以通过在组件中使用 `watch` 选项来监听数据的变化。默认情况下，Vue2 会对数据进行深度监听，即会递归遍历对象中的所有属性，监听它们的变化。但是，在某些情况下，我们可能不需要进行深度监听，因为这会带来一些性能问题。此时，我们可以通过设置 `watch` 选项的第三个参数 `deep` 为 `false` 来取消深度监听。

例如，以下代码取消了对 `obj` 对象的深度监听：

watch: {
  obj: {
    handler: function(val, oldVal) {
      // ...
    },
    deep: false
  }
}

相关问题

vue3里写watch监听

在 Vue 3 中，`watch` 是一种响应式监听机制，它允许你在数据变化时执行自定义的函数，类似于观察（watches）某个数据源。Vue 提供了两种 `watch` 的用法：简单模式和对象模式。

1. **简单模式（深度监听）**:

   // 简单使用
   this.$watch('someData', (newVal, oldVal) => {
     console.log('data changed:', newVal, 'old value:', oldVal);
   });

这里 `someData` 是你想要监听的属性名，当这个属性的值发生变化时，会触发回调函数。

2. **对象模式（深度监听与选项）**:
更灵活的方式是作为对象返回，这样可以提供更精细的配置：

   // 对象模式
   const watchOptions = {
     target: 'someData', // 监听的目标
     handler: (newVal, oldVal) => {
       console.log('data updated:', newVal, 'previous value:', oldVal);
     },
     deep: true, // 是否深度监听，默认为 false
     immediate: true, // 是否立即执行一次，初始化时
   };
   this.$watch(watchOptions);

在这里，你可以设置深度监听（`deep`），立即执行（`immediate`）等选项。

**相关问题--:**
1. Vue 3 的 `watch` 可以监听哪些类型的变量？
2. 如何在 Vue 3 中取消 `watch` 监听？
3. `watch` 和 `computed` 在响应式更新上有什么区别？

vue 如何控制 watch 是否监听

在 Vue 中，可以通过设置 `watch` 属性的 `immediate` 和 `deep` 选项来控制是否监听，并且可以使用 `unwatch` 方法来取消监听。

其中，`immediate` 选项用于指定是否在组件挂载时立即执行一次 `watch`，默认值为 `false`；`deep` 选项用于指定是否深度监听嵌套对象的变化，默认值为 `false`。

示例代码如下：

export default {
  data() {
    return {
      obj: {
        name: 'Tom',
        age: 18
      }
    }
  },
  watch: {
    obj: {
      handler(newValue, oldValue) {
        console.log('obj changed', newValue, oldValue)
      },
      immediate: true, // 立即执行一次
      deep: true // 深度监听
    }
  },
  methods: {
    unwatchObj() {
      this.$watch('obj', null) // 取消监听
    }
  }
}

以上代码，会在组件挂载时立即执行一次 `watch`，并且深度监听嵌套对象的变化。同时，提供了一个 `unwatchObj` 方法，用于取消对 `obj` 的监听。