vue3 监听props 的变化-Toy模板网

这篇具有很好参考价值的文章主要介绍了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'})
]