Vue3+TypeScript学习笔记（三）

1. toRef接受两个参数,第一个是响应式对象,第二个是对象中的属性。作用是将响应式属性单独剥离出来返回给新的变量使用
2. toRefs接受一个参数(响应式对象),作用是将对象中的每一个属性都分离出来,之后用一个Map收集并返回。通常和解构赋值一起使用。
3. toRaw——作用和toRef相反，接受一个响应式对象，将其改为非响应式对象并返回

<template>
    <div>{{ item }}</div>
    <button @click="change">修改</button>
    <hr />
    <div>{{ obj2 }}</div>
    <button @click="change2">修改2</button>
</template>

<script setup lang="ts">
import { ref, reactive, toRef, toRaw, toRefs } from 'vue'

let obj = reactive({ name: '小满', age: 23, hobby: 'jk' })
let item = toRef(obj, 'name')
const change = () => {
    // 可正常修改
    item.value = '大满'
}

let obj2 = reactive({ name: '小满', age: 23, hobby: 'jk' })

// 如果要解构则必须使用toRefs
let { name, age, hobby } = toRefs(obj2)
const change2 = () => {
    name.value = '大满'
    age.value = 25
    hobby.value = '洛丽塔'
}

// toRefs底层实现原理(将传入对象的每个值包装成Ref对象后用map收集并返回)
const useDemo = <T extends object>(obj:T) => {
    let map:any
    for(let key in obj){
        map[key] = toRef(obj,key)
    }
    return map
}

// toRaw——作用和toRef相反,接受一个响应式对象,将其改为非响应式(不接受第二个参数)
console.log(obj2)
console.log(toRaw(obj2))