0
点赞
收藏
分享

微信扫一扫

海外云手机有哪些推荐?

八卦城的酒 2024-09-12 阅读 21

在 Vue 3 中,watch API 得到了增强和重新设计,以提供更加灵活和强大的响应式数据监听能力。Vue 3 引入了 Composition API,其中 watch 函数是 Composition API 的一部分,允许你在 setup() 函数中直接监听响应式引用(ref)或响应式对象(reactive)的变化。

基本用法

在 Vue 3 的 Composition API 中,watch 函数的基本用法如下:

 

javascript复制代码

import { ref, watch, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
// 监听 count 的变化
watch(count, (newValue, oldValue) => {
console.log(`count 从 ${oldValue} 变成了 ${newValue}`);
});
// 可以在 onMounted 中启动异步操作,并在完成后更新 count
onMounted(() => {
setTimeout(() => {
count.value++;
}, 1000);
});
return {
count,
};
},
};

监听多个源

watch 也可以同时监听多个响应式引用或响应式对象,当它们中的任何一个发生变化时,都会执行回调函数。

 

javascript复制代码

import { ref, watch } from 'vue';
export default {
setup() {
const firstName = ref('John');
const lastName = ref('Doe');
watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
console.log(`名字从 ${oldFirstName} ${oldLastName} 变成了 ${newFirstName} ${newLastName}`);
});
return {
firstName,
lastName,
};
},
};

深度监听

默认情况下,watch 只会监听响应式引用的值的变化,而不会深入监听对象内部属性的变化。如果你需要深度监听一个响应式对象,可以传递第三个参数 { deep: true }

 

javascript复制代码

import { reactive, watch } from 'vue';
export default {
setup() {
const user = reactive({
name: 'John Doe',
age: 30,
});
watch(user, (newValue, oldValue) => {
// 注意:这里不会触发,因为 user 对象引用没有变
// 除非使用深度监听
}, { deep: true });
// 深度监听 user 对象内部属性的变化
watch(() => user.name, (newName, oldName) => {
console.log(`名字从 ${oldName} 变成了 ${newName}`);
});
return {
user,
};
},
};

立即执行

如果你希望在监听开始时立即执行回调函数,可以传递 { immediate: true } 作为 watch 的第四个参数。

 

javascript复制代码

watch(count, (newValue, oldValue) => {
// ...
}, { immediate: true });

停止监听

watch 函数返回一个停止监听的函数。你可以调用这个函数来停止监听响应式数据的变化。

 

javascript复制代码

const stopWatch = watch(count, (newValue, oldValue) => {
// ...
});
// 停止监听
stopWatch();

这些是使用 Vue 3 中 watch 函数的基本和高级用法。通过灵活使用这些功能,你可以有效地管理组件中的响应式数据变化。

举报

相关推荐

0 条评论