vue3 的 ref、 toRef 、 toRefs

1、ref: 对原始数据进行拷贝。当修改 ref 响应式数据的时候，模版中引用 ref 响应式数据的视图处会发生改变，但原始数据不会发生改变

<template>
  <div>{{refA}}</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

let a = 1
const refA = ref(a) // 对原始数据 a 进行拷贝

refA.value = 12 // 此时模版视图引用 refA 的地方进行更新
console.log(a) // 此时原始数据 a 的值还是 1
</script>

2、toRef: 用于将对象中的某个属性转换成响应式数据。当修改 toRef 响应式数据的时候，原始数据会发生变化，但是模版中引用 toRef 响应式数据的视图处不会发生改变

<template>
  <div>{{toRefName}}</div>
</template>

<script lang="ts" setup>
import { toRef } from 'vue'

let obj = { name: 'bobo', age: 18 }
const toRefName = toRef(obj, 'name') // 将原始数据 obj 的 name 属性转换为响应式数据

toRefName.value = 'lili' // 此时模版视图引用 toRefName 的地方不更新
console.log(toRefName.value, obj.name) // 都变成 'lili'
</script>

3、toRefs: 用于将整个对象转换成响应式数据。当修改 toRefs 响应式数据的时候，原始数据会发生变化，但是模版中引用 toRefs 响应式数据的视图处不会发生变化

<template>
  <div>{{toRefsObj.name}} ---- {{toRefsObj.age}}</div>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'

let obj = { name: 'bobo', age: 18 }
const toRefsObj = toRefs(obj) // 将原始数据 obj 所有属性转换为响应式数据

toRefsObj.name.value = 'lili' // 此时模版视图引用 toRefsObj 属性的地方不更新
toRefsObj.age.value = 16 // 此时模版视图引用 toRefsObj 属性的地方不更新
console.log(toRefsObj.name.value, obj.name) // 都变成 'lili'
console.log(toRefsObj.age.value, obj.age) // 都变成 16
</script>