ref和reactive区别

使用区别

reactive定义引用数据类型，ref 定义基本类型
reactive定义的变量直接使用，ref 定义的变量使用时需要.value
模板中均可直接使用，vue帮我们判断了是reactive还是ref定义的(通过__v_isRef属性)，从而自动添加了.value。

// 定义
let count = ref(0);
let obj = reactive({a: 1, b: 2});
// 使用
count.value = 1;
menu  = {a: 1, b: 2, c: 3};

return {
	count，
	...toRefs(menu)
}

1
2
3
4
5
6
7
8
9
10
11
12

ref

ref 用于创建一个简单的响应式数据，即一个基本类型的数据，比如数字、字符串等，它会将这个基本类型数据包装成一个响应式对象，并且返回一个带有.value属性的对象。

这样，我们在对这个响应式对象进行读取或修改时，就可以直接使用.value来访问或修改它的值。

reactive

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
44