vue3移除watch监听

在Vue 3中，移除watch监听可以通过调用watch函数返回的函数来实现。你可以将watch函数赋值给一个变量，然后通过调用这个变量来停止监听。下面是一个简单的示例：

// 定义一个变量用于存储watch监听返回的函数
let stopWatch = watch(() => state.room, (newval, oldval) => {
  console.log("新值:", newval, "老值:", oldval);
}, { deep:true });

// 在需要移除监听的地方调用stopWatch()
stopWatch();

// 重新启动监听的方法是将监听器重新赋值给变量
stopWatch = watch(() => search, (newval, oldval) => {
  console.log("新值:", newval, "老值:", oldval);
}, { immediate: true, deep: true });

通过调用`stopWatch()`来移除监听，然后重新赋值给`stopWatch`来重新启动监听。

相关问题

vue3 移除watch 监听

在 Vue3 中，`watch` 选项被移除了，取而代之的是使用 `watchEffect` 和 `watch` 函数来进行监听。

`watchEffect` 函数可以接受一个函数作为参数，当这个函数中所依赖的数据发生变化时，就会自动执行这个函数。举个例子：

import { reactive, watchEffect } from 'vue'

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log(state.count)
})

上面的代码中，我们使用 `reactive` 创建了一个响应式对象 `state`，并使用 `watchEffect` 监听了 `state.count` 的变化，当 `count` 发生变化时，就会自动执行回调函数中的代码并打印出 `count` 的值。

而 `watch` 函数则可以用来监听一个具体的数据，并在数据变化时执行回调函数。举个例子：

import { reactive, watch } from 'vue'

const state = reactive({
  count: 0
})

watch(() => state.count, (newVal, oldVal) => {
  console.log(`newVal: ${newVal}, oldVal: ${oldVal}`)
})

上面的代码中，我们使用 `reactive` 创建了一个响应式对象 `state`，并使用 `watch` 监听了 `state.count` 的变化，当 `count` 发生变化时，就会自动执行回调函数并打印出新旧值。

vue移除watch监听

在Vue中，移除watch监听的方法有两种，一种是通过将watch赋值给一个变量，然后在达到条件时调用该变量来终止监听；另一种是通过取消监听函数来实现。具体实现方法如下：

1. 将watch赋值给一个变量，然后在达到条件时调用该变量来终止监听：

let stopWatch = watch(() => state.room, (newval, oldval) => {
  console.log("新值:", newval, "老值:", oldval);
}, {deep:true});

// 停止监听
stopWatch();

2. 通过取消监听函数来实现：

命令式写法：

export default {
  data: {
    showType: false
  },
  mounted() {
    const unwatch = this.$watch('showType', function(newValue, oldValue){
      console.log(newValue);
      // 取消监听
      unwatch();
    });
  },
}

声明式写法：

export default{
  data: {
    showType: false
  },
  watch: {
    showType: {
      handler(newValue, oldValue) {
        console.log(newValue);
        // 取消监听
        this.$options.watch.showType = null;
      },
      immediate: true
    }
  }
}