Vue2和Vue3的数据响应式原理区分

vue2中的数据响应式的实现主要是采用了Object.defineProperty()的方法，通过该方法的get()和set()来实现数据的响应式变化，简单写一下，vue实现的要复杂的多

let person = {
  name:'tom',
  sex:'男'
}
let p = {}
Object.defineProperty(p,'name',{
	configurable:true,
	get(){ //有人读取name时调用
      	console.log('有人读取了name属性');
		return person.name
	},
	set(value){ //有人修改name时调用
		console.log('修改了name属性,修改为:${value}，界面更新')
		person.name = value
	}
})

在修改数据的时候通过get来读，通过set来改，然后vue通过get和set中的方法来实现数据的响应式，
但是这样实现的数据响应式是有缺点的，比如新增对象中的属性、删除属性, 界面不会更新，直接通过下标修改数组, 界面不会自动更新，在数组中需要调用push、pop、shift、unshift、splice、sort和reverse这七个api，vue才能监测到数组中数据的更新

 data() {
    return {
      person: {
        name: "tom",
        sex: "男",
        friends: ["jack", "sam", "lisa"],
      },
    };
  },
  methods: {
    addAge() {
      // this.person.age = 20; 直接添加一个没有的属性，页面无法更新
      this.$set(this.person,'age',20) //需要使用$set来进行添加，页面更新
    },
    delName(){
      // delete this.person.name 直接删除属性页面无法更新
      this.$delete(this.person,'name') //需要使用$delete来进行删除，页面更新
    },
    changeFriends() {
      // this.person.friends[0] = "John"; 使用数组下标修改无法更新页面
      // this.$set(this.person.friends, "0", "john"); 可以使用$set来修改数组下标，页面更新 
      this.person.friends.splice(0, 1, "john"); //使用splice方法，页面更新
    },
  },

Vue3中就不存在这些问题了，Vue3中的响应式通过Proxy和Reflect来进行实现，使用Proxy来更方便的对数据的变化进行捕获，新增和删除数据时也能检测到，使用Reflect来对数据进行操作对于错误的抛出更友好，写一个简单的原理

 let person = {
  name:'tom',
  sex:'男',
}
const p = new Proxy(person,{
  // target为操作的对象，propName为该对象的属性
  // 读取属性时调用
  get(target,propName){
    console.log(`有人读取了p身上的${propName}属性`);
    return Reflect.get(target,propName)
  },
  // 新增或修改属性时调用
  set(target,propName,value){
    console.log(`有人修改了p身上的${propName}属性，修改为${value},界面更新`);
    Reflect.set(target,propName,value)
  },
  // 删除属性时调用
  deleteProperty(target,propName){
    console.log(`有人删除了p身上的${propName}属性，界面更新`);
    return Reflect.deleteProperty(target,propName)
  }
})