本文主要是介绍Vue3-Ref Reactive toRef toRefs对比学习、标签ref与组件ref，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
响应式数据：
Ref
-
作用：定义响应式变量。
-
语法：
let xxx = ref(初始值)(里面可以是任何规定内类型、数组等)。 -
返回值：一个
RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。 -
注意点：
-
JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。（或者配置插件完成自动提示，但仍需理解value的意义） -
对于
let name = ref('张三')来说，name不是响应式的，name.value是响应式的。 -
其实
ref接收的数据可以是：基本类型、对象类型。 -
若
ref接收的是对象类型，内部其实也是调用了reactive函数。其对象类型也显示为Proxy -
可以创建对象实例时田间深层次访问
-
Reactive
-
作用：定义一个响应式对象（基本类型不要用它，要用
ref，否则报错） -
语法：
let 响应式对象= reactive(源对象)。 -
返回值：一个
Proxy的实例对象，简称：响应式对象。 -
注意点：
reactive定义的响应式数据是“深层次”的。
宏观角度看：ref用来定义：基本类型数据、对象类型数据；
reactive用来定义：对象类型数据。
-
区别：
ref创建的变量必须使用.value（可以使用volar插件自动添加.value，现在volar被废弃，平替为Vue - Official）。
reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
-
使用原则：
若需要一个基本类型的响应式数据，必须使用
ref。若需要一个响应式对象，层级不深，
ref、reactive都可以。若需要一个响应式对象，且层级较深，推荐使用
reactive。
转换成响应式数据：
toRef 和 toRefs：
-
作用：将一个响应式对象中的每一个属性，转换为
ref对象。 -
备注：
toRefs与toRef功能一致，但toRefs可以批量转换。
语法如下：
<template><div class="person"><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>性别：{{person.gender}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeGender">修改性别</button></div>
</template><script lang="ts" setup name="Person">import {ref,reactive,toRefs,toRef} from 'vue'// 数据let person = reactive({name:'张三', age:18, gender:'男'})// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力let {name,gender} = toRefs(person)// 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力let age = toRef(person,'age')// 方法function changeName(){name.value += '~'}function changeAge(){age.value += 1}function changeGender(){gender.value = '女'}
</script>标签ref与组件ref：
作用：用于注册模板引用。
用在普通
DOM标签上，获取的是DOM节点。用在组件标签上，获取的是组件实例对象。
用在普通DOM标签上：
<template><div class="person"><h1 ref="title1">aa</h1><h2 ref="title2">bb</h2><h3 ref="title3">cc</h3><input type="text" ref="inpt"> <br><br><button @click="showLog">点我打印内容</button></div>
</template><script lang="ts" setup name="Person">import {ref} from 'vue'let title1 = ref()let title2 = ref()let title3 = ref()function showLog(){// 通过id获取元素const t1 = document.getElementById('title1')// 打印内容console.log((t1 as HTMLElement).innerText)console.log((<HTMLElement>t1).innerText)console.log(t1?.innerText)// 通过ref获取元素console.log(title1.value)console.log(title2.value)console.log(title3.value)}
</script>用在组件标签上：
<!-- 父组件App.vue -->
<template><Person ref="ren"/><button @click="test">测试</button>
</template><script lang="ts" setup name="App">import Person from './components/Person.vue'import {ref} from 'vue'let ren = ref()function test(){console.log(ren.value.name)console.log(ren.value.age)}
</script><!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">import {ref,defineExpose} from 'vue'// 数据let name = ref('张三')let age = ref(18)/****************************//****************************/// 使用defineExpose将组件中的数据交给外部defineExpose({name,age})
</script>注意：
- 有些时候我们试图从reactive中解构出数据，如：const {XX1,XX2} = sthReactive但XX1和XX2一旦被提取出来就变成普通数据失去响应式。
- 对于响应式嵌套较深的数据，使用reactive可以一路.出来，而ref需要开启deep模式，因为ref只能访问浅层数据。
- 修改reactive中的数据时，单个数据能够修改，但是直接修改整个对象，相当于用一个带有新地址值的响应式对象（即使你再给他套个reactive也于事无补）覆盖，原先的值销毁，无法访问和修改了（换家具还是换房？）
这篇关于Vue3-Ref Reactive toRef toRefs对比学习、标签ref与组件ref的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
