vue3中watch监听如何使用

在Vue3中，可以使用`watch`函数来监听数据的变化。`watch`函数接收两个参数：要监听的数据和回调函数。当监听的数据发生变化时，回调函数会被触发。

例如，我们要监听一个名为`count`的数据：

import { watch, reactive } from 'vue'

const state = reactive({
  count: 0
})

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

在上面的例子中，我们使用了`reactive`函数来创建一个响应式对象`state`，并在`watch`函数中监听了`state.count`的变化。当`count`发生变化时，回调函数会被触发，并输出变化前后的值。

相关问题

vue3中watch监听

在Vue3中，我们可以使用watch函数来监听数据的响应式变化。watch函数的基本用法是将要监听的数据作为第一个参数，副作用函数作为第二个参数，并且可以通过配置对象进行一些额外的设置。例如：

watch(data, (newData, oldData) => {
// 副作用函数
}, { immediate: true, deep: true })

在这个例子中，data是要监听的数据，(newData, oldData)是副作用函数，它会在数据发生变化时被调用。配置对象{ immediate: true, deep: true }可以设置监听的行为，immediate为true表示在初始化时立即执行一次副作用函数，deep为true表示深度监听，即递归监听对象内部的变化。

另外，Vue3允许同时存在多个watch监听器。你可以分别监听不同的数据，并在副作用函数中处理它们的变化。例如：

watch(name, (newValue, oldValue) => {
console.log("new", newValue, "old", oldValue);
});

watch(age, (newValue, oldValue) => {
console.log("new", newValue, "old", oldValue);
});

这样，当name或age发生变化时，对应的副作用函数就会被调用，并打印出新旧值。

综上所述，在Vue3中，我们可以使用watch函数来监听数据的响应式变化，并通过配置对象进行一些额外的设置。同时，我们也可以同时存在多个watch监听器来监听不同的数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3基础之watch监听](https://blog.csdn.net/weixin_64740434/article/details/131619855)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [VUE3的watch监听使用](https://blog.csdn.net/moxunjinmu/article/details/123219081)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue3中watch监听localstorage

在Vue3中，可以使用`watchEffect`函数来监听`localStorage`的变化。具体步骤如下：

1. 在组件中引入`watchEffect`函数和`ref`函数。

import { watchEffect, ref } from 'vue';

2. 创建一个`ref`对象来存储`localStorage`的值。

const localStorageValue = ref(localStorage.getItem('key'));

3. 使用`watchEffect`函数来监听`localStorage`的变化，并更新`localStorageValue`的值。

watchEffect(() => {
  localStorageValue.value = localStorage.getItem('key');
});

4. 在模板中使用`localStorageValue`来展示`localStorage`的值。

<template>
  <div>{{ localStorageValue }}</div>
</template>

完整代码如下：

<template>
  <div>{{ localStorageValue }}</div>
</template>

<script>
import { watchEffect, ref } from 'vue';

export default {
  setup() {
    const localStorageValue = ref(localStorage.getItem('key'));

    watchEffect(() => {
      localStorageValue.value = localStorage.getItem('key');
    });

    return {
      localStorageValue,
    };
  },
};
</script>