学习Vue3中reactive

一、前言

在 Vue 3 中，reactive 是一个用于创建响应式对象的函数。响应式对象是 Vue 3 中数据驱动视图的核心，它们的属性的变化会自动触发相关的视图更新。下面是关于 reactive 的一些重要概念和使用方法：

1、响应式对象

通过 reactive 创建的对象是响应式的，这意味着当对象的属性发生变化时，相关的视图会自动更新。

import { reactive } from 'vue';

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

// 在视图中使用 state.count，当 count 变化时，视图会自动更新

2、对象属性的访问

你可以像访问普通对象一样访问响应式对象的属性。

console.log(state.count); // 输出当前 count 的值
state.count++; // 修改 count 的值，会触发视图更新

3、嵌套响应式对象

如果响应式对象中的属性也是对象，它们也会被自动转换为响应式对象。

const nestedState = reactive({
  nestedObj: {
    nestedCount: 0,
  },
});

nestedState.nestedObj.nestedCount++; // 触发视图更新

4、避免直接修改响应式对象

Vue 3 建议避免直接修改响应式对象，而是使用提供的 API 进行修改，以确保变更能够被 Vue 3 监测到。

5、ref vs reactive

除了 reactive 外，Vue 3 还提供了 ref 函数用于创建响应式数据。主要区别在于 ref 只能包装基本类型数据，而 reactive 可以包装任意 JavaScript 对象。