vue3： toRef, reactive, toRefs, toRaw

vue3： toRef, reactive, toRefs, toRaw

<template><div>{{ man }}</div><hr><!-- <div>{{ name }}--{{ age }}--{{ like }}</div> --><div><button @click="change">修改</button></div>
</template>
<script setup lang='ts'>
import { toRef, reactive, toRefs, toRaw } from 'vue';
/*** toref： 只能修改响应式对象的值,非常响应式视图毫无变化。* torefs： 将解构后的对象，声明为响应式的ref。* toRaw：将响应式对象 为一个普通的对象*/const man=reactive({name:"小田",age:23,like:"JK"})
// const like=toRef(man,"name");// const {name,age,like} = toRefs(man)
const change = ()=> {// like.value="洛丽塔"// console.log(man);// name.value="小田田"// console.log(name,age,like);console.log(man,toRaw(man));}
</script>
<style scoped></style>