Proxy

const obj = new Proxy(target, handler);
Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty

• target: 被代理对象。
• handler: 是一个对象，声明了代理target的一些操作。
• obj: 是被代理完成之后返回的对象。

reactive 原理

• 将传入的数据包装成一个Proxy对象
• 当被get 的时候, 触发依赖收集, 最后effect / update
• 当被set 的时候, 绑定更新函数, 通知各个组件更新, 最后 最后effect / update

ref和reactive的区别

• ref(0) --> reactive( { value:0 })
• ref的参数一般是基本数据类型
• 在模板中访问ref中的数据，系统会自动帮我们添加.value,在JS中访问ref中的数据，需要手动添加.value

toRef

• 创建一个 ref 对象，其 value 值指向另一个对象中的某个属性

toRefs

• 创建多个 ref 对象，每个 value 值指向另一个对象中的相应属性

toRaw

• 从reactive 得到原始数据, 这样改变raw 数据的时候, ui组件不会发生变化