ref和reactive区别_ref和reactive的区别

66. ref和reactive区别

在 Vue3 中，ref和reactive都是用于创建响应式数据的 API，二者的本质区别在于：

• ref 用于创建一个简单的响应式数据，即一个基本类型的数据，比如数字、字符串等，它会将这个基本类型数据包装成一个响应式对象，并且返回一个带有.value属性的对象。这样，我们在对这个响应式对象进行读取或修改时，就可以直接使用.value来访问或修改它的值。

• reactive 用于创建一个复杂的响应式数据，即一个对象或数组。它会将这个对象或数组的所有属性或元素都转化为响应式数据，并返回一个响应式对象。我们在对这个响应式对象进行读取或修改时，可以直接使用点操作符或数组下标来访问或修改它的属性或元素。

下面是一个使用ref和reactive创建响应式数据的示例代码，用于展示二者之间的区别：

<template>
  <div>
    <p>count: {{ count.value }}</p>
    <button @click="increment">increment</button>
    <p>person: {{ person.name }}, {{ person.age }}</p>
    <button @click="updatePerson">update person</button>
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 创建一个响应式的基本类型变量
    const count = ref(0);

    // 使用 reactive 创建一个响应式的对象
    const person = reactive({
      name: 'Alice',
      age: 20,
    });

    // 点击按钮，修改 count
    const increment = () => {
      count.value++;
    };

    // 点击按钮，修改 person
    const updatePerson = () => {
      person.name = 'Bob';
      person.age = 30;
    };

    return {
      count,
      person,
      increment,
      updatePerson,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在上述代码中，我们使用ref创建了一个响应式的基本类型变量count，并在点击按钮时修改了它的值。使用reactive创建了一个响应式的对象person，并在点击按钮时修改了它的属性值。注意到访问ref变量的值需要使用.value，而访问reactive变量的属性值则可以直接使用点操作符。