一篇文章搞懂Vue3响应式：Ref和Reactive

#前端实习

前言：次次写文章之前都要谴责一下自己的拖延症，我……明日会早日克服的，

最近正好在学习Vue3的知识今天整理了一下Ref和Reactive的相关知识点，速速进入到内容吧，我还要睡觉呜呜。

---

响应式是什么？

就是响应式数据是一种能够自动追踪变化并立即更新页面的数据

在Vue3中，响应式编程是一个比较重要的概念，其中两个比较核心的API就是Ref和Reactive

Ref: 用于创建一个响应式的基本数据类型。（基本数据类型：字符串(String)，数字(Number),布尔值(Boolean)，数组(Array)，对象(object)）可以将普通的数据变成响应式的数据，可以监听数据的变化。使用Ref时，一定要通过.value来访问和被修改的数据。

Reactive: 用于创建一个响应式对象，可以包含多个属性。通过Reactive，可以将整个对象变成响应式的，使对象的属性发生任何变化的时候都可以被检测到。

以上这两个API可以让我们在Vue3中更便捷地处理数据的响应式变化，从而更好地实现数据驱动的开发方式。

用途：

Ref

1. 用于创建响应式的基本数据类型，如字符串、数字等等
2. 可以在setup() 函数中使用，管理简单的数据状态
3. 通过.value来访问和修改数据（一定不能忘记哦）
4. 适用于管理一些简单的数据，例如计数器，输入框的数值等等

Reactive：

1. 用于创建包含多个属性的响应式对象
2. 可以处理复杂的对象数据结构，是对象的属性发生改变的时候被检测到
3. 适用于管理复杂数据对象，如用户信息、表单数据等等
4. 会递归地将对象的所有嵌套的属性都变成响应式的（不管你套了多少层，躲得有多深都可以检测到），确保整个对象的变化都能够被追踪

ref在setup中的使用

在Vue3中，通过ref() 函数创建一个Ref对象，然后可以通过.value来访问和修改数据值

基本用法

import { ref } from 'vue'; //引入Ref

const count = ref(0); // 创建一个Ref对象，初始值为0

console.log(count.value); // 访问Ref对象的值

count.value = 1; // 修改Ref对象的值

在setup中的使用

在setup()函数中，可以使用ref()吧数据包裹起来，把该数据变成响应式的数据

import { ref } from 'vue'

//注意这边的数据都不是响应式的

let name = ref('张三') //响应式数据

let age = ref(18) //响应式数据

通过方法修改ref中的数据

function changeName(){

  name.value = '李四'  //要去操作ref包裹的东西必须要是.value

}

function changeAge(){

  age.value += 1

}

为何使用ref

响应式更新：使用Ref可以实现数据的响应式更新，当数据发生变化时，相关的视图会自动更新。

单一数据管理：适用于管理简单的基本数据类型，如计数器、开关状态等。

方便访问和修改：通过.value属性可以方便地访问和修改Ref对象的值，使代码更加清晰和易读。

使用Ref能够有效管理组件内部的状态，实现数据的响应式更新，提高开发效率并简化代码逻辑。

Reactive的基本概念以及在模板中的使用

在Vue3中，Reactive用于创建一个响应式对象，使对象的属性发生变化时能够被检测到。通过reactive()函数创建一个响应式对象，对象的所有属性都变成响应式。

依旧是直接包裹就可以使用

import { reactive } from 'vue';

//数据

let car = reactive({

  brand: 'BMW',

  color: 'red',

  price: 1000000

})

深层响应式

Reactive会递归地将对象的所有嵌套属性都变成响应式，确保整个对象的变化能够被追踪

const nestedData = reactive({

  nestedObj: {

    key: 'value'

  }

});

// 修改嵌套属性

nestedData.nestedObj.key = 'new value';

与Ref区别

Ref适用于管理简单的基本数据类型，访问和修改数据值需要使用.value。

Reactive适用于创建包含多个属性的响应式对象，对象的所有属性都是响应式的。

为何使用Reactive

复杂对象管理：适用于处理复杂的对象数据结构，使整个对象都变成响应式。

对象属性变化追踪：能够检测对象内部所有属性的变化，确保数据变化能够被自动更新到视图。

简化数据管理：提供了一种便捷的方式来管理包含多个属性的对象，使数据管理更加简单和高效。

使用Reactive可以有效处理复杂对象的数据响应式管理，使数据状态更可控、更易维护，提高应用程序的可维护性和扩展性。

Ref和Reactive比较和选择

性能和适用场景

性能：

Ref比Reactive轻量，适合简单数据类型的管理。

Ref只管理单一数据值，相对较快。

Reactive适合处理复杂对象，可能会受到性能影响，特别是在处理大型对象时。

适用场景：

使用Ref处理简单数据类型，如计数器、开关状态等。

使用Reactive处理包含多个属性的复杂对象，如用户信息、表单数据等。

对象的处理

Ref：

只能处理单一数据值，不适合处理对象。

Reactive：

能够处理对象及其嵌套属性，使整个对象都变成响应式，方便管理复杂的数据结构。

局限性和注意事项

Ref：

不能直接处理对象，需要额外处理对象属性。

适用于简单数据类型，不适合处理复杂对象。

Reactive：

在处理大型对象时可能影响性能，需谨慎使用。

对于特殊类型如函数、Date对象等，可能存在一些限制和注意事项，需要额外处理。

比较和选择建议

根据数据的复杂度和需求选择合适的响应式方式。

使用Ref来处理单一数据值的简单场景，以提高性能和效率。

使用Reactive来管理复杂对象的数据，确保整个对象变化能够被追踪，并注意性能影响。

在实际开发中，根据具体的业务需求和数据结构，选择合适的响应式方式是非常重要的，以确保代码的性能和可维护性。