Vue3-Ref Reactive toRef toRefs对比学习、标签ref与组件ref

本文主要是介绍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用来定义：基本类型数据、对象类型数据；

1. reactive用来定义：对象类型数据。

• 区别：

1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value，现在volar被废弃，平替为Vue - Official）。

1. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

• 使用原则：

1. 若需要一个基本类型的响应式数据，必须使用ref。

2. 若需要一个响应式对象，层级不深，ref、reactive都可以。

3. 若需要一个响应式对象，且层级较深，推荐使用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>

注意：

1. 有些时候我们试图从reactive中解构出数据，如：const {XX1,XX2} = sthReactive但XX1和XX2一旦被提取出来就变成普通数据失去响应式。
2. 对于响应式嵌套较深的数据，使用reactive可以一路.出来，而ref需要开启deep模式，因为ref只能访问浅层数据。
3. 修改reactive中的数据时，单个数据能够修改，但是直接修改整个对象，相当于用一个带有新地址值的响应式对象（即使你再给他套个reactive也于事无补）覆盖，原先的值销毁，无法访问和修改了（换家具还是换房？）

这篇关于Vue3-Ref Reactive toRef toRefs对比学习、标签ref与组件ref的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---