1.toRef
toRef是用来给抽离响应式对象（被reactive包裹的对象）中的某一个属性的，并且把这个属性包裹成ref对象，使其和原对象产生链接。
或许有人就回有人有疑问了？这个toRef存在有什么意义呢？因为我们知道reactive包裹的东西其实已经有了响应式了，再用toRef什么意义呢？
<script setup lang="ts">
import { ref,reactive,toRef } from 'vue';
const userinfo = reactive({
name:'张三',
age:18
})
//定义一个age2赋值userinfo.age
const age2 = userinfo.age
// const state = toRef(userinfo,'age')
const toChange = () =>{
userinfo.age++
console.log("userinfo",userinfo);
}
</script>
<template>
<div class="content">
<button @click="toChange">按钮</button>{{ age2 }}
</div>
</template>
<style scoped>
</style>
定义一个age2赋值userinfo.age，修改对象userinfo里的age值，数据改变DOM不改变
如图：我们如果要单独把对象中的某个值拿出来，如果直接赋值，会断掉响应式（age2）。就算后面puserinfo.age的名字改了，但是因为断掉了响应式，输出的还是原有的名字。
而使用toRef会保持对其源 property 的响应式连接。
并且响应是互相的，数据源数据也会被更改
数据会实时更新到HTML视图上 用toRef这样写
<script setup lang="ts">
import { ref,reactive,toRef } from 'vue';
const userinfo = reactive({
name:'张三',
age:18
})
const age2 = userinfo.age
//toRef
const state = toRef(userinfo,'age')
const toChange = () =>{
//.value调用
state.value++
console.log("userinfo",userinfo);
}
</script>
<template>
<div class="content">
<button @click="toChange">按钮</button>{{ state }}
</div>
</template>
<style scoped>
</style>
数据更新DOM也同步更新
有人又会问了，那如果说toRef只是把这个响应式对象的属性包裹成ref对象，那我直接用ref这个对象不就可以了吗？何必要用toRef呢。
答：ref是不会去更改原数据的，ref本质是拷贝原数据，而toRef会修改原数据！！
使用ref DOM更新，数据没更新
<script setup lang="ts">
import { ref,reactive,toRef } from 'vue';
const userinfo = reactive({
name:'张三',
age:18
})
const age2 = userinfo.age
//ref
const state = ref(userinfo.age)
const toChange = () =>{
//.value调用
state.value++
console.log("userinfo",userinfo);
}
</script>
<template>
<div class="content">
<button @click="toChange">按钮</button>{{ state }}
</div>
</template>
<style scoped>
</style>
标签：const,遇到,age,toRef,学习,reactive,userinfo,vue3,ref From： https://www.cnblogs.com/bisiyuan/p/17171056.html