toRefs

2023年05月03日

柏拉文

越努力，越幸运

一、认识

---

toRefs 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

二、语法

---

<template>
  <div>
    {{ obj.a }}

    <button @click="onChange">改变</button>
  </div>
</template>

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

const obj = reactive({
  a: 1,
  b: 2
})

const objRefs = toRefs(obj)

const onChange = () => {
  const { a } = objRefs;

  a.value++;
  console.log(a.value)
  console.log(obj.a)
}
</script>