Vue3-Ref Reactive toRef toRefs对比学习

时间：2024-06-02 08:21:29

响应式数据：

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>

注意：

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

相关文章