reactive和ref

1.reactive

接收的数据类型：对象类型

使用:

const data1 = reactive({value: "1",name: "2"
})
data1.value // 使用

结果:

作用：把参数加工成一个代理对象（proxy对象）

原理：基于Es6的Proxy实现，通过代理操作源对象，相比于ref定义的浅层次响应式数据对象，reactive定义的是更深层次的响应式数据对象。

const data1 = reactive({value: "1",name: {value: "2" // 响应式的}
})

缺点：如果使用解构赋值解构对象，解构出来的结果就不是响应式了。必须要解构的话可以使用toRefs将reactive定义的对象中的属性都转为响应式的再进行解构。

const position = reactive({ x, y })const {x, y} = position // 这样定义的x,y不是响应式const {x, y} = toRefs(position)  // 这样定义的x,y是响应式

2.ref

接收的数据类型：基本数据类型、对象类型

使用ref转换基本数据类型：

const data3 = ref(1)data3.value 取值方法

结果：

ref转换基本数据类型的原理是创建一个具有value属性的对象，并使用Object.defineProperty()将其定义为响应式对象。所以ref定义的响应式对象需要从.value属性中取值。但是在模板中编译器会自己根据响应式对象的类型判断是否需要从value中取值，不需要手动加.value。

使用ref将对象转为响应式对象：

const data2 = ref({value: "1",name: "2"
})
console.log("ref", data2)

结果：其本身是一个RefImpl，但是其value是一个Proxy，因为如果ref接收的参数是对象类型，会把对象参数通过reactive函数加工成一个Proxy代理对象放到ref的value属性上。可以在下图中看到value属性是一个Proxy对象。与直接使用reactive不同的是，需要从value中取值，不能直接取值。

reactive和ref的区别：

接收的数据类型不同：ref可以接收基本数据类型和对象，reactive方法只能接受对象
用法不同：ref需要在.value属性上取值，reactive可以直接使用对象.键名的方式取值
原理不同：ref使用Object.defineProperty()的get和set方法，而reactive的响应式原理是依赖于ES6中的Proxy()

toRef和toRefs

toRef和toRefs是将响应式对象中的属性也转换为响应式的。区别在于toRef一次只能转换一个属性，toRefs是一次将所有属性都转为响应式的。

需要注意的是：toRef和toRefs与ref的区别是：ref的本质是拷贝，改变结果数据的值不会改变源对象的值，而toRef后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。

ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新。

3.toRef

接收两个参数：源响应式对象和属性名，返回一个ref数据。
例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。获取数据值的时候需要加.value

    const myTitle = toRef(props, 'title')console.log(myTitle.value)

4.toRefs

作用：toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref对象。常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。

工作原理：会遍历代理对象的所有属性，并将所有属性转换为响应式对象并挂载在一个新对象上返回。获取数据值的时候需要加.value。

const { myTitle } = toRefs(props)
console.log(myTitle.value)

reactive、ref、toRef、toRefs相关推荐

C#学习笔记-方法参数params、ref和in、out
目录 params 用法 ref 用法按引用传递参数引用返回值引用局部变量 in 用法特殊注意点优势 out 用法版本变迁信息其他 ref.in和out三者异同方法重载 C#中ref和 ...
vue3中的ref，toRef，toRefs三个的作用
1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值. ref是做的一个拷贝关系,修改对象msg的值,不会影响对象obj,视图会发生变 ...
C#拾遗系列(9):继承、接口、扩展方法、分部类、类操作、Ref and Out、可空类型...
本文内容: 继承 Equal示例结构和类属性 Ref and Out 类操作扩展方法接口可空类型分部类 1. 继承 using System; using System.Collectio ...
reactive和ref区别
reactive与ref区别 1. 从定义数据方面: ref通常用来定义基本类型数据 reactive用来定义:对象(或者数组)类型数据 ref也可以用来定义对象或者数组类型的数据,内部会通过reac ...
ref、reactive、toRef、toRefs的区别
vue3.0里给数据添加响应式有很多api可用,有时傻傻分不清,分享一下个人的理解. 一.reactive reactive 用于为对象添加响应式状态. 接收一个js对象作为参数,返回一个具有响应式状 ...
ref、reactive、toRef、toRefs
ref 作用:定义一个响应式数据语法:const xxx = ref(initValue) 创建一个包含响应式数据的引用对象 js中操作数据:xxx.value 模板中读取数据:不需要.value, ...
ref、 reactive、toref、torefs的用法，区别
ref. reactive.toref.torefs的用法,区别 ref 接受一个内部值并返回一个响应式且可变的 ref 对象.ref 对象仅有一个 .value property,指向该内部值 co ...
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖起初 ...
敲黑板！vue3重点！一文了解Composition API新特性：ref、toRef、toRefs
一文了解Composition API新特性:ref.toRef.toRefs 一.

reactive、ref、toRef、toRefs