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也于事无补）覆盖，原先的值销毁，无法访问和修改了（换家具还是换房？）