1.toRef
复制 reactive 里的单个属性并转成 ref
<template>
{{ person }}
{{ age }}
<button @click="change">change</button>
</template>
<script setup lang="ts">
import {isRef, reactive, toRef} from "vue";
const person = reactive({
name: 'Yang',
age: 23
})
// 复制reactive对象里的一个属性 并变成ref对象 并且修改这个值源数据也会发生改变
// 修改源数据这个值也会发生改变
const age = toRef(person, 'age')
const change = () => {
age.value++
console.log(isRef(age))// true
}
</script>
2.toRefs
复制 reactive 里的所有属性并转成 ref
<template>
{{ name }}
{{ age }}
<button @click="change">change</button>
</template>
<script setup lang="ts">
import {reactive, toRefs} from "vue";
const person = reactive({
name: 'Yang',
age: 23
})
// 不经历refs的数据解构之后会失去响应式
// let {name, age} = person
// 辅助reactive对象并把所有属性都通过ref变成响应式数据
let {name, age} = toRefs(person)
const change = () => {
name.value = 'Tom'
age.value++
}
</script>
3.toRaw
把一个响应式数据变成普通数据
<template>
{{ person }}
{{ raw }}
<button @click="change">change</button>
</template>
<script setup lang="ts">
import {reactive, toRaw} from "vue";
const person = reactive({
name: "Yang",
age: 23
})
// 把一个响应式对象变成一个普通对象
// 经过toRaw拿到的对象和源对象是引用关系 修改其中一个另一个也会发生该改变
// 区别就是源对象修改会引起视图更新 toRaw得到的对象不会引起视图更新
const raw = toRaw(person)
const change = () => {
raw.age++
console.log(person)
console.log(raw)
}
</script>
