vue中ref与reactive区别与用法

文章目录

• 前言
• 一、ref
• 二、reactive
• 三、区别
• 四、总结

---

前言

在vue中ref和reactive是用于响应式数据的两种不同方式，ref和reactive是Vue.js框架中的两种关键概念。这两个概念都是用于实现响应式数据绑定的。

---

ref：

在Vue中，ref是一个用于在模板或实例中获取DOM元素或组件实例的特殊属性。ref属性可以被添加到任何Vue组件或HTML元素上，并且可以在组件或实例中使用$refs属性来访问它。

在Vue中，ref是一个用于在模板或实例中获取DOM元素或组件实例的特殊属性。ref属性可以被添加到任何Vue组件或HTML元素上，并且可以在组件或实例中使用$refs属性来访问它。

以下是一些ref的使用场景：

1. 获取元素的值或属性：可以使用ref来获取表单元素的值或属性，例如获取input中的value。

2. 调用子组件的方法：可以使用ref来获取子组件实例，并且可以调用子组件中的方法。

3. 动态创建或删除子组件：可以使用ref来动态创建或删除子组件，并且可以在父组件中访问子组件实例。

下面是一个使用ref的例子：

在模板中：

在脚本中：

在上面的例子中，我们可以使用ref属性来获取组件或元素并对其进行操作。可以通过使用$refs属性来访问它们。

reactive:

在Vue中，reactive是用于创建响应式数据的函数。它接收一个普通对象作为参数，并返回一个被代理的响应式对象。

当响应式对象中的属性被修改时，Vue会自动检测到这些变化并更新相关的视图。这种响应式的能力使得Vue的数据驱动视图更新非常方便。

例如：

import { reactive } from 'vue';

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

state.count++; // 视图会自动更新

在React中也有类似的功能，使用的是useState或useReducer等Hook函数。但是需要注意的是，Vue对响应式的实现和React的实现有所不同，可能会导致一些React开发者感到不适应。

区别：

1. ref是用于处理基本数据类型的，例如数字、字符串等。而reactive可以处理任何类型的数据，包括对象、数组等。

2. ref返回的是一个代理对象，使用时需要访问它的value属性，例如：refData.value。而reactive返回的是一个响应式对象，可以直接访问它的属性。

3. ref提供了一些特殊的方法，例如.value属性、.get()方法、.set()方法等。而reactive提供了一些额外的方法，例如.toRaw()方法、.markRaw()方法等。

4. ref通常用于处理单一的数据，而reactive常用于处理复杂的数据结构，例如对象和数组。  

---

 总结：

       ref适用于处理简单的数据类型，而reactive适用于处理复杂的数据结构。无论是处理简单类型的数据还是复杂类型的数据，Vue 3提供了适用的工具来满足不同的需求。