【Vue3 组合式 API: reactive 和 ref 函数】

文章目录

• • [1. 什么是组合式 API？](#1. 什么是组合式 API？)
  • [2. reactive 函数](#2. reactive 函数)
  • [3. ref 函数](#3. ref 函数)
  • [4. reactive vs ref](#4. reactive vs ref)

1. 什么是组合式 API？

组合式 API 是 Vue 3 中的一种新特性，它允许我们通过函数来组织组件的逻辑，而不是依赖于选项式 API 中的选项对象。这使得代码更易于组织和重用，并且可以提高开发效率。

---

2. reactive 函数

reactive 函数用于创建一个响应式的对象，当对象的属性发生变化时，相关的视图将会自动更新。

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

// 在模板中使用
{{ state.count }}

// 修改状态
state.count++

在上面的示例中，state 对象是响应式的，因此当 state.count 发生变化时，相关的视图将会自动更新。

---

3. ref 函数

ref 函数用于创建一个包装过的响应式对象，它返回一个带有 value 属性的对象，该属性的值可以被修改。下面是一个示例：

import { ref } from 'vue';

const count = ref(0);

// 在模板中使用
{{ count.value }}

// 修改状态
count.value++

在上面的示例中，count 是一个包装过的响应式对象，我们通过 count.value 来访问和修改其值。

---

4. reactive vs ref

• reactive 用于创建一个包含多个属性的响应式对象，适合于复杂的数据结构。
• ref 用于创建一个单一的响应式对象，适合于单个值的情况。

在选择使用哪个函数时，需要根据具体的需求来决定。