vue3 监听props 的变化

再三说明 仅仅个人学习用，不误导别人
我觉得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'})]

监听变化

来源地址：https://blog.csdn.net/qq_41304029/article/details/132558927