当前位置：首页 > article >正文

vue3入门教程：ref函数

article 2024/12/26 2:22:15

基本用法

引入 ref

首先，你需要从 vue 包中引入 ref 函数：
```
import { ref } from 'vue';
```
创建一个响应式变量

使用 ref 函数来创建一个响应式变量：
```
const count = ref(0);
```
这里，count 是一个响应式引用对象，其 .value 属性初始值为 0。
在模板中使用

在 Vue 模板中，你可以直接访问响应式引用对象的值，而不需要使用 .value：
```
<template>
  <div>{{ count }}</div>
</template>
```
在 JavaScript 中使用

在 JavaScript 代码中，你需要通过 .value 来访问或修改响应式变量的值：
```
count.value = 1;
console.log(count.value);  // 输出: 1
```

在组合式 API 中使用

ref 通常与 Vue 的组合式 API 一起使用，特别是在 setup 函数中：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

在模板中：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

`ref` 与原始类型

ref 可以用于基本数据类型（如数字、字符串、布尔值）以及对象和数组。对于对象和数组，ref 会使其变得“响应式”，即对象的属性或数组的元素发生变化时，Vue 也能检测到并更新视图。

`ref` 与 `reactive`

ref 和 reactive 都是 Vue 3 中的响应式 API，但它们有不同的使用场景：

ref 用于基本数据类型和保存单一对象的引用。
reactive 用于创建响应式的对象或数组。

简单来说，如果你有一个基本数据类型或者想要一个明确的引用，使用 ref；如果你有一个对象或数组，并且想要使其内部属性和元素也响应式，使用 reactive。

`toRef` 和 `toRefs`

有时候你可能需要将一个响应式对象中的某个属性转换为 ref，这时候可以使用 toRef 或 toRefs：

import { reactive, toRef, toRefs } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});

const countRef = toRef(state, 'count');
const { name } = toRefs(state);