Vue学习笔记集--reactive和ref函数

reactive和ref函数

在 Vue 3 的 Composition API 中,reactiveref 是用于创建响应式数据的两个核心函数。

它们的核心区别在于数据类型处理方式使用场景


refreactive 的对比

特性 ref reactive
适用数据类型 基本类型(number, string 等) 对象或数组
返回值类型 Ref 对象(含 .value 属性) Proxy 代理的响应式对象
访问值的方式 必须通过 .value 访问 直接访问属性(如 obj.key
解构响应性 保持响应性(无需额外处理) 直接解构会丢失响应性,需用 toRefs
使用场景 独立的基本类型值、需要传递的响应式变量 复杂对象状态管理

ref 的深度解析

1. 基本用法
javascript 复制代码
import { ref } from 'vue';

const count = ref(0); // 定义响应式数据
console.log(count.value); // 访问值 → 0
count.value = 1; // 修改值 → 触发更新
2. 底层原理
  • ref 将数据包装在一个对象中,通过 .value 属性实现响应式。

  • 即使赋值对象,内部会自动调用 reactive 处理:

    javascript 复制代码
    const objRef = ref({ name: 'Vue' });
    objRef.value.name = 'Vue 3'; // 响应式更新
3. 自动解包(模板中免 .value

在模板中直接使用 ref 变量时,无需 .value

vue 复制代码
<template>
  <div>{{ count }}</div> <!-- 自动解包,无需 count.value -->
</template>

reactive 的深度解析

1. 基本用法
javascript 复制代码
import { reactive } from 'vue';

const state = reactive({
  name: 'Vue',
  version: 3,
});
state.name = 'Vue 3'; // 直接修改属性 → 触发更新
2. 底层原理
  • 基于 ES6 的 Proxy 实现,深度代理整个对象。

  • 直接解构会丢失响应性 ,需用 toRefs 转换:

    javascript 复制代码
    const state = reactive({ name: 'Vue' });
    const { name } = toRefs(state); // 转换为 Ref 对象
    console.log(name.value); // 'Vue'(保持响应性)
3. 局限性
  • 不能直接替换整个对象(会破坏响应式):

    javascript 复制代码
    let state = reactive({ count: 0 });
    state = { count: 1 }; // ❌ 错误!失去响应性
    // 正确做法:修改属性
    state.count = 1; // ✅

如何选择 ref vs reactive

1. 使用 ref 的场景
  • 管理基本类型数据(如数字、字符串)。
  • 需要传递响应式变量 到函数或组件时(ref 更灵活)。
  • 需要明确知道某个值是响应式的(通过 .value 显式操作)。
2. 使用 reactive 的场景
  • 管理复杂对象或数组(如表单数据、配置对象)。
  • 需要集中管理多个相关属性,保持代码组织性。
  • 希望直接通过属性访问(无需 .value)。
3. 混合使用
javascript 复制代码
const state = reactive({
  count: ref(0), // 自动解包,state.count 仍是响应式
  user: ref({ name: 'Alice' })
});
console.log(state.count); // 0(无需 .value)

常见问题解答

1. 为什么 ref 需要 .value
  • ref 通过对象包装实现响应式,.value 是统一访问和修改值的接口。
  • 在模板中自动解包是为了提升开发体验。
2. 可以全部用 ref 吗?
  • 可以,但处理对象时不如 reactive 直观:

    javascript 复制代码
    const obj = ref({ name: 'Vue' });
    obj.value.name = 'Vue 3'; // 需要 .value
  • 推荐根据数据类型选择:简单类型用 ref,复杂对象用 reactive

3. reactive 如何响应式替换整个对象?
  • 使用 Object.assign 合并属性:

    javascript 复制代码
    const state = reactive({ count: 0 });
    Object.assign(state, { count: 1, name: 'Vue' }); // ✅ 保持响应性

示例代码对比

使用 ref
vue 复制代码
<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>
使用 reactive
vue 复制代码
<script setup>
import { reactive } from 'vue';

const state = reactive({
  count: 0,
});
const increment = () => {
  state.count++;
};
</script>

<template>
  <button @click="increment">{{ state.count }}</button>
</template>
相关推荐
绅士玖12 分钟前
Vue.js 小知识点大揭秘:提升开发效率的实用技巧
前端·vue.js
怀念无所不能的你1 小时前
acwing背包问题求方案数
学习·算法·动态规划·dp
LVerrrr1 小时前
Missashe考研日记-day29
学习·考研
灏瀚星空1 小时前
从基础到实战的量化交易全流程学习:1.3 数学与统计学基础——线性代数与矩阵运算 | 矩阵基础
笔记·python·学习·线性代数·数学建模·金融·矩阵
qq_162911591 小时前
tigase源码学习杂记-IO处理的线程模型
java·学习·源码·xmpp·tigase·多线程io模型
拖孩2 小时前
【Nova UI】十四、打造组件库之按钮组件(下):按钮组组件的构建之旅
前端·javascript·vue.js
viperrrrrrrrrr72 小时前
大数据学习(115)-hive与impala
大数据·hive·学习·impala
Rudon滨海渔村2 小时前
[随笔] 升级uniapp旧项目的vue、pinia、vite、dcloudio依赖包等
前端·vue.js·uni-app
Watermelo6172 小时前
Vue3调度器错误解析,完美解决Unhandled error during execution of scheduler flush.
前端·javascript·vue.js·elementui·html·es6·bug
名字不要太长 像我这样就好7 小时前
【iOS】OC源码阅读——alloc源码分析
笔记·学习·macos·ios·objective-c