vue3wacth监听props

使用 watch 监听 Props 的变化
在 Vue 3 中，为了监听来自父组件传递到子组件的 prop 数据的变化，可以利用 watch 函数。此方法适用于当需要基于 prop 改变而执行特定逻辑的情况。
定义 Prop 并使用 Watch 进行监控
下面是一个简单的例子展示如何定义一个接受外部传入属性 (prop) 的子组件，并对其变动做出反应：
import { defineComponent, watch } from 'vue';

export default defineComponent({
props: {
message: String,
},
setup(props) {
// 当message这个prop发生改变时会触发该回调函数
watch(() => props.message, newValue => {
console.log(`Prop changed to ${newValue}`);
});

return {};
}
});
登录后复制
对于更复杂的数据结构比如对象或数组，如果想要追踪其内部成员的变化，则需启用深度监视选项[^2]。
启用 Deep 和 Immediate 参数
有时不仅希望首次渲染就能立即运行一次侦听器内的操作，还期望能够捕捉深层次嵌套数据项的更新。这时可以通过配置额外两个布尔类型的参数——immediate 和 deep 来满足需求[^3]。
// TypeScript 版本的例子展示了带有 immediate 和 deep 配置的 watch 方法
import { ref, defineComponent, watch } from 'vue';
interface User {
name?: string;
}
const MyComponent = defineComponent({
props: {
user: Object as () => User,
},
setup(props) {
const count = ref(0);

watch(
() => props.user?.name,
(newName, oldName) => {
if (!oldName && newName) {
alert('User has been set!');
} else if (newName !== oldName){
console.log(`${oldName} -> ${newName}`);
}
},
{ immediate: true, deep: true } // 设置为true使能即时调用和深层比较
);

return { count };
},
});
登录后复制
需要注意的是，在某些情况下可能会遇到 watch 不起作用的问题；这可能是由于版本差异或其他原因造成的特殊行为[^4]。因此建议开发者保持框架及相关依赖处于最新稳定版状态以减少潜在兼容性问题的发生几率。