博客站

在 Vue 3 中，ref 是用于创建响应式数据的一个常用工具。ref 通常用于基本类型数据（如 string、number、boolean 等），但也可以用于对象和数组。以下是使用 ref 创建响应式数据的详细步骤和示例：

1. 引入 ref

首先，你需要在 Vue 组件中引入 ref 函数。

import { ref } from 'vue';

2. 创建响应式数据

使用 ref 函数创建一个响应式数据。ref 返回一个包含 value 属性的对象，该属性指向实际的数据。

const count = ref(0);

3. 访问和修改数据

通过 .value 属性访问和修改 ref 创建的数据。

console.log(count.value); // 访问数据
count.value++; // 修改数据

4. 在模板中使用

在模板中，Vue 会自动解包 ref 的 .value 属性，因此你可以直接使用 ref 创建的变量。

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

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

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

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

    return {
      count,
      increment
    };
  }
};
</script>

5. 在组合式 API 中使用

在组合式 API 中，ref 通常用于在 setup 函数中创建响应式数据。

import { ref } from 'vue';

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

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

    return {
      count,
      increment
    };
  }
};

6. 在 <script setup> 语法中使用

如果你使用 <script setup> 语法，可以更简洁地使用 ref。

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

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

const count = ref(0);

function increment() {
  count.value++;
}
</script>

7. 处理对象和数组

虽然 ref 通常用于基本类型数据，但它也可以用于对象和数组。在这种情况下，ref 会将对象或数组包装在一个 value 属性中。

const user = ref({
  name: 'John',
  age: 30
});

console.log(user.value.name); // 访问对象属性
user.value.age++; // 修改对象属性

const list = ref([1, 2, 3]);

console.log(list.value[0]); // 访问数组元素
list.value.push(4); // 修改数组

8. 在模板中使用对象和数组

在模板中，Vue 会自动解包 ref 的 .value 属性，因此你可以直接使用 ref 创建的对象或数组。

<template>
  <div>
    <p>{{ user.name }} is {{ user.age }} years old.</p>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

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

const user = ref({
  name: 'John',
  age: 30
});

const list = ref([1, 2, 3]);
</script>

总结

• 使用 ref 创建响应式数据时，基本类型数据通过 .value 访问和修改。
• 在模板中，Vue 会自动解包 ref 的 .value 属性，因此可以直接使用 ref 创建的变量。
• ref 也可以用于对象和数组，但在这种情况下，对象或数组会被包装在 .value 属性中。
• 在组合式 API 和 <script setup> 语法中，ref 是创建响应式数据的常用工具。