学习Vue3 第五章（to系列全家桶）

toRef

基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

其实就是相当于提出一个响应式对象的某个值，还没有改变响应式

<template>
  <div>{{ data }}</div>
  <div>{{ name }}</div>
  <button @click="add">操作</button>
</template>

<script setup>
import { reactive, toRef } from 'vue'

const data = reactive({
  name: '林宥嘉',
  age: 30,
})

let name = toRef(data, 'name')

const add = () => {
  // data.name = '林宥嘉2'
  name.value = '林宥嘉2'
}
</script>

toRefs

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef 创建的

<template>
  <div>{{ data }}</div>
  <div>{{ name }}</div>
  <button @click="add">操作</button>
</template>

<script setup>
import { reactive, toRef, toRefs } from 'vue'

const data = reactive({
  name: '林宥嘉',
  age: 30,
})

// const { name } = data // 不能直接解构，因为解构出来的不是响应式数据
const { name } = toRefs(data) // toRefs 将响应式对象中的每个属性都转换成响应式数据
name.value = '林宥嘉1'
const add = () => {
  data.name = '林宥嘉2'
}
</script>

toRaw

根据一个 Vue 创建的代理返回其原始对象

<template>
  <div>{{ data }}</div>
  <div>{{ name }}</div>
  <button @click="add">操作</button>
</template>

<script setup>
import { reactive, toRaw } from 'vue'

const data = reactive({
  name: '林宥嘉',
  age: 30,
})

const obj = toRaw(data) // 将响应式对象转换成普通对象

console.log(data, obj)
</script>