个人博客网站域名注册百度经验悬赏任务平台
学习Vue3中reactive
- 一、前言
- 1、响应式对象
- 2、对象属性的访问
- 3、嵌套响应式对象
- 4、避免直接修改响应式对象
- 5、ref vs 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 对象。