当前位置：首页 > news >正文

vue3 监听props 的变化

news 2025/7/6 22:27:54

再三说明仅仅个人学习用，不误导别人
我觉得props 会创建对应的属性，去接受这些值，比如传递一个ref的基本值 age
props.age = age.value
传递一个ref的引用值 person
props.person= person.value
传递一个reactive的引用值 person
props.person= person

最开始时候，props指向了一个响应式的reactive person，如果我们手动将person = {} 整个替换掉，是不影响原来指向的值的（setup只在初始化时执行一次，所有一开始props指向的是一个响应式的person，而当前改变的person 并不影响，props当中的person 所以也无法监听）

1、父组件使用reactive 接收数据

let person = reactive({age: 21,name: 'test',info: {a: 1}
});

person 和 info 以及prop都是一个reactive对象，都可以作为watch第一个参数

const props = defineProps({person: {age: Number,name: String,info: {a: Number}}
});可以监听到info 里边某个属性变化
watch(person.info, (value) => {console.log(value);
})
整个info 被替换掉也可以监听到
watch(() => person.info, (value) => {console.log(value);
})
整个person 替换掉 无法被监听，因为props当中的person 指向的是一个已经封装了的reactive对象
如果在父组件当中直接person = newValue props是无法监听到的

2、父组件使用ref 接收数据

let person = ref({age: 21,name: 'test',info: {a: 1}
});

将person.value = { } 整个替换

可以监听到
watch(props, (value) => {console.log(value);
})
无法监听
watch(props.person, (value) => {console.log(value);
})
可以监听到person 被整个替换掉
watch(() => props.person, (value) => {console.log(value);
})

做项目中，我将修改或者新增的表单组件分离出去了，每次新增或者修改时候需要给表单组件传递一个person 值，新增时候需要置空，修改时候需要赋予值

我们知道person = {}是没办法监听到的，所以采用

let person = ref({age: 21,name: 'test',info: {a: 1}
});const add= ()=>{person.value = {}
]const add= ()=>{Object.assign(person.value,{age:2,name:'test'})
]