vue ref和reactive区别

Vue 3中的ref和reactive都是用于创建响应式数据的API，但它们在数据类型、使用方式、访问方式、设计理念以及应用场景等方面存在明显的区别。

1. 数据类型：ref主要用于定义简单类型（如字符串、数字、布尔值等）和单一对象，而reactive则用于定义复杂的类型，如JavaScript对象和数组等；
2. 使用方式：ref需要在模板中使用ref指令以及在JavaScript代码中使用ref函数进行创建和使用，而reactive则需要通过调用Vue.js提供的reactive函数进行包装和创建；
3. 访问方式：对于通过ref函数创建的响应式数据，需要通过.value属性来访问其实际值；而对于通过reactive函数创建的响应式对象，可以直接访问其属性或调用其方法；
4. 设计理念：ref主要解决的是单一元素/数据的响应式问题，而reactive则是为了解决JavaScript对象和数组等复杂数据结构的响应式问题；
5. 应用场景：reactive适用于创建复杂的数据结构，如对象、数组等，以及需要动态添加和删除属性的情况。而ref则更适用于基本类型数据，如数字、字符串等，以及需要直接访问和修改引用值的情况；

代码示例：
使用ref的示例

<template>  
  <div>  
    <p>Count: {{ count }}</p>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    // 使用 ref 创建一个响应式引用  
    const count = ref(0);  
  
    // 定义一个方法来增加 count 的值  
    const increment = () => {  
      count.value++;  
    };  
  
    // 返回需要在模板中使用的变量和方法  
    return {  
      count,  
      increment  
    };  
  }  
};  
</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

使用reactive的示例

<template>  
  <div>  
    <p>Name: {{ state.name }}</p>  
    <p>Age: {{ state.age }}</p>  
    <button @click="increaseAge">Increase Age</button>  
  </div>  
</template>  
  
<script>  
import { reactive } from 'vue';  
  
export default {  
  setup() {  
    // 使用 reactive 创建一个响应式对象  
    const state = reactive({  
      name: 'Alice',  
      age: 25  
    });  
  
    // 定义一个方法来增加 age 的值  
    const increaseAge = () => {  
      state.age++;  
    };  
  
    // 返回需要在模板中使用的变量和方法  
    return {  
      state,  
      increaseAge  
    };  
  }  
};  
</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

总结：

在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在setup函数中，我们定义了一个increment方法，用于在按钮点击时增加count的值。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。

在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。state对象本身就是一个响应式数据结构，我们可以直接访问其属性，而不需要额外的.value前缀。在setup函数中，我们还定义了一个increaseAge方法，用于在按钮点击时增加state.age的值。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。

这些示例展示了如何在Vue 3的setup函数中使用ref和reactive来创建和管理响应式数据。

ref和reactive在Vue 3中各有其特点，选择使用哪种方式取决于数据的类型和具体的使用场景。在大多数情况下，可以根据数据的特点来选择使用reactive还是ref。