动态给vue的data添加一个新的属性时会发生什么？怎样解决？

vue2 一般是通过Object.defineProperty() 来进行数据代理，响应式绑定

      let parson = {
        name: "陈",
        age: 20,
      };

      let p = {}

      const keys = Object.keys(parson);

      keys.map(i=>{
      	Object.defineProperty(p,i,{
      		// 如要修改对象里的某个值，需要开启configurable:true,
      		get(){
      			console.log(`读取了p的${i}的值`);
      			return parson[i];
      		},
      		set(val){
      			console.log(`修改了p的${i}的值`);
      			parson[i] = val;
      		}
      	})
      })

p.name 会调用getter p.hoboby 新增一个新属性，没绑定响应式，p的值是改变了,但parson是没改变

所以就类似会造成它dom未重新渲染更新，没走setter方法

解决方法：

在vue里 解决的方法

1、使用Vue.set() 或者 this.$set(对象，键名，值)

2、使用Object.assign() 直接使用对象合并，但要声明一个变量来接收多对象合并的值

this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})

3、直接使用强制更新,$forceUpdate();

但在vue3中，使用的是proxy 数据代理，不管是对象、数组 都可进行响应式数据的绑定