以下是使用 watch 和 watchEffect 监听属性的基本示例：
使用 watch 监听属性
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import { ref, watch } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
// 监听 message 的变化
watch(() => {
console.log('message changed:', message.value);
});
return {
message
};
}
};
</script>
在上述示例中，watch 函数接受两个参数：第一个参数是一个函数，返回需要监听的数据，第二个参数是回调函数，当被监听的数据发生变化时会被调用。
使用 watchEffect 监听属性
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import { ref, watchEffect } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
// 监听使用了 message 的函数内部的所有响应式数据变化
watchEffect(() => {
console.log('message changed:', message.value);
});
return {
message
};
}
};
</script>
watchEffect 函数接受一个函数作为参数，这个函数内部使用了响应式数据，它会在其中使用的响应式数据发生变化时被调用。
无论你选择使用 watch 还是 watchEffect 取决于你的具体需求。watch 提供了更精细的控制，可以监听特定的数据，并提供前后的值；而 watchEffect 更自动，会在函数内部使用的响应式数据发生变化时立即执行。
这是在 Vue 3 中监听属性变化的基本用法，更多详细信息可以参考[官方文档](https://v3.vuejs.org/guide/reactivity-computed-watch.html#watch)。
转载请注明出处：http://www.zyzy.cn/article/detail/12981/Vue3