Vue2和Vue3响应式原理对比

Vue2响应式原理的实现主要是依靠Object.definePropety()

Vue3的响应式原理的实现主要是依靠proxy和Reflect

Vue2:

通过Object.definePropety()的getter和setter方法，对数据进行响应式处理，但仅限于查询和修改，而增加和删除还是需要额外进行相关的处理。需要使用

this.$set()  或者Vue.set（）

Vue3:

在window身上有一个proxy（代理）属性

vue3的实现大概如下

const p =new proxy(源对象，{在这里包含着getter setter 还有deleteProprty  })

它可以捕获到数据的增删改查，此时只是捕获了，但是没有对页面数据进行响应式处理。

此时要引入新的东西——Reflect(反射)

Object身上的东西已经逐渐转移到了Reflect身上，而Reflect更好，

例如使用Object.definePropety()

定义一个响应式属性，如果重复定义了会报错，代码量多的时候，我们只能通过try...catch捕获异常，像封装框架类的东西，不太适合使用Object.

使用Reflect.definePropety()

如果重复定义了，后台并不会报错，其实本身Reflect.definePropety()是有返回值的，返回的是布尔值。

总结：

通过proxy(代理)：拦截对象中任意属性的变化，包括属性值的读（getter）、添加和修改(setter)、                               删除(deletePropety)

通过Reflect(反射)：对源对象的属性进行操作

reactive 通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。

---

---

在vue3中，定义一个对象，并有响应式数据，都是要通过reactive函数，例如：

setup(){
   let p=reactive({

        name:'xxx',

        age:'xxx'

        })

   function fun(){

        console.log(p)        //p就是proxy,此时我们就可以联想到上面的原理了

        }

}