torefs的使用

场景

使用 reactive 定义的响应式对象，在创建时使用了解构赋值，解构赋值的数据会失去响应式数据的效果。

可以使用 toRefs 函数解决这个问题。

步骤

将 reactive 定义的响应式对象传递给 toRefs 函数后解构，就会保持数据的响应式。

代码

<script setup>
// 引入 toRefs
import { reactive, toRefs } from "vue";

const user = reactive({name: 'bingo', age: 18})

// 解构赋值需要使用toRefs保持响应式
const { name, age } = toRefs(user)

</script>

<template>
  <div style="border: 1px solid red; margin: 16px; padding: 16px;">
    <h1>name: {{name}}, age: {{age}}</h1>
    <button @click="age++">过年了</button>
  </div>
</template>