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监听器来监听不同的数据。123
引用[.reference_title]
- 1 vue3基础之watch监听[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
allinsert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - 2 3 VUE3的watch监听使用[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
allinsert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
vue3中watch监听localstorage
在Vue3中,可以使用watchEffect
函数来监听localStorage
的变化。具体步骤如下:
- 在组件中引入
watchEffect
函数和ref
函数。
import { watchEffect, ref } from 'vue';
- 创建一个
ref
对象来存储localStorage
的值。
const localStorageValue = ref(localStorage.getItem('key'));
- 使用
watchEffect
函数来监听localStorage
的变化,并更新localStorageValue
的值。
watchEffect(() => {
localStorageValue.value = localStorage.getItem('key');
});
- 在模板中使用
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>
相关推荐













