Vue 3.0之ref、toRef、toRefs详解

2023-08-27 17:31:21

Vue 3.0 之 ref、toRef、toRefs 详解：解锁响应式数据与双向绑定

简介

Vue 3.0 的到来不仅带来了激动人心的新特性，还对旧有的 API 进行了优化。其中，ref、toRef 和 toRefs 这三个 API 备受瞩目。它们让你轻松实现响应式数据和双向绑定，显著提升前端开发效率。

一、ref：组件引用管理利器

ref 在 Vue 3.0 中横空出世，让你可以轻松获取组件引用。通过它，你可以在组件中自由穿梭，访问其他组件或元素，打破组件之间的壁垒。

<template>
  <div>
    <input ref="inputRef" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputRef = ref(null);
    return { inputRef };
  },
};
</script>

二、toRef：普通数据变身响应式

toRef 赋予你将普通数据瞬间变身为响应式数据的超能力。有了它，你可以轻松实现数据双向绑定，让你的组件时刻反映数据的变化。

<template>
  <div>
    <input v-model="count" />
    <p>{{ count }}</p>
  </div>
</template>

<script>
import { ref, toRef } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return { count: toRef(count) };
  },
};
</script>

三、toRefs：对象属性集体响应式

toRefs 的强大之处在于，它能将对象中的所有属性集体转换为响应式数据。这样一来，你可以轻松实现对象数据的双向绑定，让你的组件时刻保持与对象数据的同步。

<template>
  <div>
    <input v-model="user.name" />
    <p>{{ user.name }}</p>
  </div>
</template>

<script>
import { ref, toRefs } from 'vue';

export default {
  setup() {
    const user = ref({ name: 'John' });
    return { user: toRefs(user) };
  },
};
</script>