toRef

2023年05月03日

柏拉文

越努力，越幸运

一、认识

---

toRef 基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

二、语法

---

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

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

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

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

const aRef = toRef(obj, 'a')

const onChange = () => {
  aRef.value++

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