vue3中watch用法

。Vue3中watch的用法与Vue2略有不同，在Vue3中可以直接在setup函数内使用watch，也可以在Options API中使用。下面是一个使用watch监听data属性变化的例子：

<template>
  <div>
    {{ count }}
  </div>
</template>

<script>
import { watch, reactive } from 'vue';

export default {
  name: 'WatchExample',
  setup() {
    const state = reactive({
      count: 0,
    });

    watch(() => state.count, (newValue, oldValue) => {
      console.log('count变化了', newValue, oldValue);
    });

    return {
      count: state.count,
    };
  },
};
</script>

当count属性发生变化时，控制台会输出信息，同时也会更新页面上的显示。

相关问题

vue3中watch的用法

在Vue3中，watch可以通过以下方式使用：

1.在setup函数中使用watch：

import { watch } from 'vue'

setup() {
  // 声明响应式变量
  const count = reactive({ value: 0 })
  
  // 监听count.value的变化
  watch(() => count.value, (newValue, oldValue) => {
    console.log(`count变为了${newValue}，旧值为${oldValue}`)
  })
  
  return {
    count
  }
}

2.在组件中使用watch：

import { watch } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    // 监听count的变化
    watch('count', (newValue, oldValue) => {
      console.log(`count变为了${newValue}，旧值为${oldValue}`)
    })
  }
}

以上是watch的使用方法，在Vue3中还提供了watchEffect函数来监听变量的变化。需要注意的是Vue3中取消监听的方法不再是$watch，而是返回一个unwatch函数来取消监听。

Vue3的watch用法

Vue3中的watch函数可以用来监听数据的变化并执行相应的回调函数。在默认情况下，watch是惰性的，即只有在数据发生变化时才会执行回调函数。可以通过设置immediate: true来在初始化时立即执行回调函数。例如，可以使用ref函数创建一个响应式的数据count，并通过watch监听其变化：

const count = ref(1);
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
}, { immediate: true });

除了监听单个数据源外，还可以监听多个数据源。可以将多个数据源放在一个数组中，并通过watch监听它们的变化。例如：

const count = ref(1);
const double = ref(2);
watch(\[count, double\], (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
}, { deep: true, immediate: true });

此外，还可以使用reactive函数创建一个响应式的对象，并通过watch监听其属性的变化。例如：

const single = reactive({ count: 1, test: 2 });
watch(() => single.count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
}, { immediate: true });

还可以监听整个响应式对象的变化。例如：

const person = reactive({ name: "柳小刀", age: 18, sex: "男" });
watch(person, (newValue, oldValue) => {
  console.log(newValue, oldValue);
});

总结起来，Vue3的watch函数可以用来监听单个数据、多个数据以及整个响应式对象的变化，并执行相应的回调函数。
#### 引用[.reference_title]
- *1* *2* [vue3下watch的使用](https://blog.csdn.net/weixin_42349568/article/details/126760186)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue3 watch的用法](https://blog.csdn.net/m0_60899441/article/details/126056663)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]