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>
相关推荐
顺遂时光4 分钟前
微信小程序——解构赋值与普通赋值
前端·javascript·vue.js
anyeyongzhou6 分钟前
img标签请求浏览器资源携带请求头
前端·vue.js
技术小齐7 分钟前
网络运维学习笔记(DeepSeek优化版)026 OSPF vlink(Virtual Link,虚链路)配置详解
运维·网络·学习
努力的搬砖人.1 小时前
axios使用
vue.js
花花鱼1 小时前
vue3 动态组件 实例的说明,及相关的代码的优化
前端·javascript·vue.js
7675604791 小时前
useAsyncState源码解读
前端·vue.js
mex_wayne2 小时前
强化学习课程:stanford_cs234 学习笔记(2)introduction to RL
笔记·学习
取个名字真难呐2 小时前
GAN随手笔记
人工智能·笔记·生成对抗网络
就叫飞六吧2 小时前
git克隆项目报错:error: unable to create file vue...... Filename too long
前端·vue.js·git
光影少年2 小时前
vue3为什么要用引入Composition api
前端·vue.js