Vue3 响应式原理、reactive函数和ref函数的区别

1、Vue3 响应式原理

原理:

• 通过Proxy（代理）: 拦截对象中任意属性的变化, （属性值的读写、属性的添加、属性的删除等）；

• 通过Reflect（反射）: 对源对象的属性进行操作。

2、 reactive函数和ref函数的区别

原理：

    ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）

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

定义数据：

    ref定义基本类型数据；

    reactive定义对象（或数组）类型数据。

  ps：ref也可以用来定义对象（或数组）类型数据， 它内部会自动通过reactive转为代理对象。

使用：

    ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。

    reactive定义的数据：操作数据与读取数据时均不需要.value