ref：引用响应式值

2024-01-03 02:40:51

Vue 3 Composition API 新特性：ref、toRef 和 toRefs

引言

随着 Vue 3 的发布，Composition API 已成为开发 Vue 应用程序的推荐方式。Composition API 是一组新 API，允许我们以更具可组合性和可复用的方式构建组件。

在本文中，我们将重点关注 Composition API 中用于管理响应式数据的三个关键特性：ref、toRef 和 toRefs。

ref 允许我们在组件中引用响应式值。它与 Vue 2 中的 $refs 类似，但它有一些重要区别。

语法：

const myRef = ref(initialValue);

用法：

我们可以在组件中使用 ref 来引用响应式值。例如：

<template>
  <input v-model="myRef" />
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup() {
      const myRef = ref('');
      return {
        myRef,
      };
    },
  };
</script>

当输入框的值发生更改时，myRef 的值也会更新。

toRef 允许我们将响应式对象转换为响应式属性。这在我们需要访问响应式对象中嵌套属性时非常有用。

语法：

const myObj = reactive({ foo: 'bar' });
const fooRef = toRef(myObj, 'foo');

用法：

我们可以在组件中使用 fooRef 来访问 myObj.foo 的响应式值。例如：

<template>
  <div>{{ fooRef }}</div>
</template>
<script>
  import { reactive, toRef } from 'vue';
  export default {
    setup() {
      const myObj = reactive({ foo: 'bar' });
      const fooRef = toRef(myObj, 'foo');
      return {
        fooRef,
      };
    },
  };
</script>

toRefs 与 toRef 类似，但它将响应式对象转换为一个响应式属性对象。这在我们需要访问响应式对象的所有属性时非常有用。

语法：

const myObj = reactive({ foo: 'bar', baz: 'qux' });
const { fooRef, bazRef } = toRefs(myObj);

用法：

我们可以在组件中使用 fooRef 和 bazRef 来访问 myObj.foo 和 myObj.baz 的响应式值。例如：

<template>
  <div>{{ fooRef }} {{ bazRef }}</div>
</template>
<script>
  import { reactive, toRefs } from 'vue';
  export default {
    setup() {
      const myObj = reactive({ foo: 'bar', baz: 'qux' });
      const { fooRef, bazRef } = toRefs(myObj);
      return {
        fooRef,
        bazRef,
      };
    },
  };
</script>