VUE3组合式——响应式数据ref、reactive

VUE3 组合式 ------ 响应式数据 ref、reactive 学习笔记

一、引言

在 Vue3 中,响应式数据是构建动态交互应用的关键部分。其中,ref 和 reactive 是处理响应式数据的重要函数,深入理解它们对于高效开发 Vue3 应用至关重要。

二、ref 函数

  1. 基本概念
  • ref 用于创建一个响应式的基本数据类型(如 Number、String、Boolean 等)的引用。它接受一个初始值作为参数,并返回一个包含 value 属性的响应式对象。

  • 例如:

ts 复制代码
import { ref } from 'vue';
const count = ref(0);

这里创建了一个名为 count 的响应式数据,初始值为 0,要访问或修改它的值,需要通过 count.value。

  1. 响应式原理
  • 当 count.value 的值发生改变时,Vue 能够自动追踪到这个变化,并触发与之相关的组件重新渲染。这是因为在 ref 内部,Vue 利用了 Object.defineProperty() (在 Vue3 中对其进行了优化)或 Proxy 来实现数据劫持,监听 value 属性的读写操作。
  1. 使用场景
  • 适用于单个基本数据类型需要响应式的情况,比如一个计数器的值、一个开关的状态等。在组件的 setup 函数中,如果需要一个简单的响应式变量,ref 是很好的选择。例如,在一个简单的点击计数器组件中,只需要一个数字来记录点击次数,使用 ref 就非常简洁明了:
TS 复制代码
import { ref } from 'vue';
export default {
  setup() {
    const clickCount = ref(0);
    const handleClick = () => {
      clickCount.value++;
    };
    return { clickCount, handleClick };
  }
};

三、reactive 函数

  1. 基本概念
  • reactive 用于创建一个响应式的对象。它接受一个普通的 JavaScript 对象作为参数,并返回一个被 Proxy 代理后的响应式对象。

  • 示例:

ts 复制代码
import { reactive } from 'vue';
const state = reactive({
  name: 'John',
  age: 30
});

这里创建了一个包含 name 和 age 属性的响应式对象 state,后续可以直接通过 state.name、state.age 来访问和修改属性值,并且 Vue 会自动响应这些变化。

  1. 响应式原理
  • reactive 利用 Proxy 对象来拦截对原始对象属性的访问、设置、删除等操作。这使得它能够深度监听对象的变化,即使对象内部嵌套多层,只要有属性更新,Vue 都能感知到。与 ref 不同,不需要通过额外的 .value 来访问值,操作更符合 JavaScript 对象的常规使用方式。
  1. 使用场景
  • 当需要处理复杂的对象数据结构,如组件的状态对象包含多个相关属性,像表单数据、应用的全局状态等场景,reactive 能让整个对象自动具备响应式能力,方便管理和维护。

四、ref 与 reactive 的区别

  1. 数据类型针对性
  • ref 主要针对基本数据类型,返回的是包含 value 属性的特殊响应式对象;而 reactive 针对对象类型,直接将传入的对象转换为响应式。
  1. 使用方式
  • 访问和修改 ref 的值需要通过 .value,而 reactive 像操作普通对象一样直接访问属性即可。
  1. 响应式深度
  • reactive 能自动实现深度响应式,嵌套对象的属性变化也能被追踪;ref 本身只是对基本数据的简单封装,若要处理包含对象的复杂数据,内部对象的变化不会自动触发响应,除非对其内部进一步使用 reactive 或 ref 处理。

五、总结

在 Vue3 开发中,熟练掌握 ref 和 reactive 对于构建高效、响应式的应用十分关键。根据数据的类型和应用场景合理选择使用,能够让数据管理更加清晰,组件交互更加流畅,提升整体开发体验与应用性能。当数据是简单的基本数据类型,且只需要进行简单的读写操作,不涉及复杂的对象嵌套结构时,使用 ref 函数比 reactive 函数更合适,它能让代码更加简洁直观,避免不必要的复杂性。

相关推荐
孤鸿玉4 分钟前
[Flutter小试牛刀] 低配版signals,添加局部刷新
前端·flutter
亦黑迷失5 分钟前
轻量级 Express 服务器:用 Pug 模板引擎实现动态参数传递
前端·javascript·后端
吃瓜群众i1 小时前
理解Javascript闭包
前端·javascript
安大桃子1 小时前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede1 小时前
多行文本省略号显示,更多按钮展开全部
前端
就是我1 小时前
React 应用性能优化实战
前端·react.js·性能优化
G扇子1 小时前
深入解析XSS攻击:从原理到防御的全方位指南
前端·安全
snakeshe10101 小时前
入解析React性能优化策略:eagerState的工作原理
前端
六边形6661 小时前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
kovli1 小时前
红宝书第十八讲:详解JavaScript的async/await与错误处理
前端·javascript