vue3： toRef, reactive, toRefs, toRaw

白墨阳2024-11-16 19:50

vue3： toRef, reactive, toRefs, toRaw

javascript 复制代码

<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>