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 函数更合适,它能让代码更加简洁直观,避免不必要的复杂性。

相关推荐
訾博ZiBo11 分钟前
【Vibe Coding】001-前端界面常用布局
前端
IT_陈寒14 分钟前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪10024 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手26 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ33 分钟前
python面向对象
前端·数据库·python
长空任鸟飞_阿康38 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii35842 分钟前
快速学完React计划(第一天)
前端·react.js·前端框架
苏打水com43 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手1 小时前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript