vue3：5、组合式API-reactive和ref函数(vscode通过volar插件自动添加.value)

目录

0、两者的异同 

备注 :vscode通过volar插件自动添加.value

一、reactive()

二、ref() 

三、实现原理 

四、toRefs和toRef 

0、两者的异同 

• reactive不能处理简单类型的数据
• reactive重新分配一个对象会失去响应式。可以使用Object.assign()代替        

 let car = reactive({name:"宝马",price:120})

 function changeCar(){
    //失去响应式。
    //car = {name:"奔驰",price:"10"} //但是用ref定义的对象可以这么写 car.value = {name:"奔驰",price:"10"} 

    //reactive用Object.assign()代替
     Object.assign(car,{name:"奔驰",price:"10"})

}

• ref可以支持任何类型的值（基础类型以及对象），但是必须通过.value访问修改
• ref函数的内部实现依赖于reactive函数 

备注 :vscode通过volar插件自动添加.value

一、reactive()

二、ref() 

三、实现原理 

通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值得读写、属性的添加、属性的删除等；
通过Reflect（反射）：对被代理对象的属性进行操作；
MDN文档中描述的Proxy与Reflect:
Proxy - JavaScript | MDN

Reflect - JavaScript | MDN

vue3通过reactive的方法，利用proxy代理对象，解决vue2中Object.defineProperty的痛点，极好的支持对象监听。

但是，当监听基础类型的响应时，proxy是不能直接监听基础类型的，需要每次都构建一个对象，去用proxy代理，这样就会造成极大的性能损耗。

因此，vue3就提供了一个ref方法，通过返回一个简单的响应式对象，专门用于处理基础类型的数据响应。但是当ref接受到一个引用类型的数据时，走的还是reactive的逻辑。

 源码

ref实现的源码：【路径：packages/reactivity/src/ref.ts 】

  

reactive实现的源码【路径：packages/reactivity/src/reactive.ts 】

 

 

四、toRefs和toRef