vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)

在 Vue3 中，我们可以使用 ref 和 reactive API 来定义和修改响应式数据。

使用 ref

ref API 用于定义一个基本数据类型的响应式数据，例如数字、字符串、布尔值等。下面是一个例子：

import { ref } from 'vue';

const count = ref(0); // 定义一个名为 count 的响应式数据，初始值为 0

console.log(count.value); // 输出 0

count.value++; // 修改 count 的值为 1

console.log(count.value); // 输出 1

在代码中，我们使用 ref 函数来定义了一个响应式数据 count，它的初始值为 0。使用响应式数据时要注意，我们需要访问 value 属性来获取和修改数据的值。

使用 reactive

reactive API 用于定义一个对象的响应式数据，例如一个普通的 JavaScript 对象。下面是一个例子：

import { reactive } from 'vue';

const person = reactive({
  name: '张三',
  age: 18
});

console.log(person.name); // 输出 "张三"
console.log(person.age); // 输出 18

person.age++; // 修改 person 的 age 属性为 19

console.log(person.age); // 输出 19

在代码中，我们使用 reactive 函数来定义了一个响应式数据 person，它是一个对象，包含 name 和 age 两个属性。注意，我们无需使用 value 属性来访问和修改数据，直接使用属性名即可。

示例说明

下面是一个完整的示例，展示了如何使用 ref 和 reactive 来定义和修改响应式数据:

<template>
  <div>
    <p>计数器的值为: {{ count }}</p>
    <button @click="increment">增加</button>
    <hr>
    <p>姓名: {{ person.name }}</p>
    <p>年龄: {{ person.age }}</p>
    <button @click="changeAge">年龄 +1</button>
  </div>
</template>

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

export default {
  setup() {
    // 定义一个 ref 类型的响应式数据 count，初始值为 0
    const count = ref(0);

    // 定义一个 reactive 类型的响应式数据 person，初始值包含 name 和 age 两个属性
    const person = reactive({
      name: '张三',
      age: 18
    });

    // 定义增加计数器的方法
    const increment = () => {
      count.value++;
    };

    // 定义修改年龄的方法
    const changeAge = () => {
      person.age++;
    };

    // 返回数据和方法
    return {
      count,
      person,
      increment,
      changeAge
    };
  }
};
</script>

在上述示例中，我们定义了一个计数器和一个人物信息，通过按钮来修改计数器和年龄的值。我们可以发现，无论是 ref 还是 reactive 定义的响应式数据，都可以非常方便地使用和修改。