reactive函数

0 前言

前面我们学会了如果用ref函数实现一个响应式变量，而这一章节我们将会讲解，如何声明一个响应式对象。

1 语法

// 引入reactive
import { reactive } from 'vue';
// 声明响应式对象reactive
const reactiveObject = reactive({ /* 对象属性 */ });

上面通过通过reactive()函数，从而创建了响应式对象。

在了解了它的基本语法后，我们看一下示例。

2 示例

<template>
  <div>
    <p>Count is: {{ myObject.count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

// 使用 reactive 创建一个包含响应式数据的对象
const myObject = reactive({
  count: 0
});

// 定义方法
const increment = () => {
  myObject.count++;
};
</script>

我们上面的代码实现了一个计数器的基本功能。myObject 对象包含一个 count 属性，该属性是一个响应式的数据。通过点击按钮，调用 increment 方法，可以增加 count 的值。由于使用了响应式数据，任何对 count 的变化都会自动反映到页面中，所以 <p> 元素中的显示文本会实时更新。

具体页面效果如下：

3 reactiv和ref的对比

ref函数既能声明基础数据类型，又能声明对象类型，那我们要reactive有什么用呢？

其实在声明对象的时候使用reactive，能提供更强大的支持。

3.1 实现对象的嵌套

假设有一个嵌套对象，ref 可以包装整个对象，但它不能追踪嵌套属性的变化：

import { ref, reactive } from 'vue';

// 使用ref包装对象
const personRef = ref({
  name: 'John',
  contact: {
    email: 'john@example.com',
    phone: '123-456-7890'
  }
});

// ref只能追踪对象整体的变化
personRef.value.name = 'Jane'; // 视图更新
personRef.value.contact.email = 'jane@example.com'; // 不会触发视图更新

而使用 reactive 则可以完全追踪对象内嵌套属性的变化：

// 使用reactive创建响应式对象
const personReactive = reactive({
  name: 'John',
  contact: {
    email: 'john@example.com',
    phone: '123-456-7890'
  }
});

// reactive可以追踪对象内部嵌套属性的变化
personReactive.name = 'Jane'; // 视图更新
personReactive.contact.email = 'jane@example.com'; // 会触发视图更新

3.2 遍历对象属性更简洁

使用 reactive 创建的对象可以直接进行遍历，而 ref 需要额外的 .value 属性才能访问到实际对象：

const personRef = ref({
  name: 'John',
  age: 30
});

console.log(personRef.value); // 访问整个对象
// 遍历对象属性需要额外的.value
for (const key in personRef.value) {
  console.log(`${key}: ${personRef.value[key]}`);
}

而使用 reactive 则更直接：

const personReactive = reactive({
  name: 'John',
  age: 30
});

console.log(personReactive); // 可直接访问对象
// 直接遍历对象属性
for (const key in personReactive) {
  console.log(`${key}: ${personReactive[key]}`);
}

4 结语

好啦，通过学习reactive，我们学习如何让一个对象变成响应式对象。

这两个响应式函数式vue的重要基础，可要好好掌握。

拿在掌握了这两个基础后，我们就要接触一个更高级牛皮的语法——计算属性，实现对响应式函数的复杂运算。

来，让我们更上一层楼吧！