首页
/ 正文

vue3 ref（手把手讲解）

更新时间: 2025-03-17 22:17:30

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

Vue.js 作为前端开发领域广受欢迎的框架，其最新版本 Vue 3 引入了大量新特性与改进，其中 ref 是核心概念之一。无论是构建简单的交互组件，还是处理复杂的状态管理，ref 都是开发者需要掌握的关键工具。本文将从基础用法到高级技巧，通过实际案例与对比分析，帮助编程初学者和中级开发者系统理解 vue3 ref 的工作原理与应用场景。

一、Vue3 Ref 的基础用法与响应式特性

1.1 什么是 Ref？

在 Vue 3 中，ref 是一个用于创建响应式数据的函数。它返回一个包含原始值的“包装对象”，该对象具有一个 .value 属性，开发者可通过此属性读取或修改数据。这个设计灵感来源于 JavaScript 中的“引用类型”概念，因此被称为 ref（Reference 的缩写）。

形象比喻：
可以将 ref 理解为一个“魔法盒子”，将普通值装入其中后，Vue 就能自动追踪其变化。例如：

import { ref } from 'vue';  
const count = ref(0);  
console.log(count.value); // 输出：0  
count.value++;  
console.log(count.value); // 输出：1

在模板中使用时，Vue 会自动解包 .value，因此无需手动添加后缀：

<template>  
  <div>当前计数：{{ count }}</div>  
  <button @click="count.value++">+1</button>  
</template>

1.2 Ref 的响应式原理

Vue 3 的响应式系统基于 Proxy 实现，而 ref 的本质是通过 Proxy 包装一个对象（默认结构为 { value: 原始值 }）。当数据发生变化时，Vue 会自动触发依赖更新。

对比 Vue 2 的差异：
Vue 2 使用 Object.defineProperty 实现响应式，而 Vue 3 的 Proxy 不仅兼容所有属性操作（如 for...in），还能监听数组索引变化，因此 ref 在 Vue 3 中能更灵活地管理复杂数据类型。

二、Ref 与 Reactive 的对比与选择

2.1 基础对比

特性	ref()	reactive()
返回值类型	包含 `.value` 的对象	直接返回原始对象的代理
适用场景	单个简单值（如数字、字符串）	复杂对象或数组的集合
模板中使用	自动解包，无需 `.value`	直接使用对象属性

代码示例：

// ref 的用法  
const name = ref('Alice');  
console.log(name.value); // 'Alice'  

// reactive 的用法  
const user = reactive({  
  name: 'Alice',  
  age: 25  
});  
console.log(user.name); // 'Alice'（无需 .value）

2.2 选择 Ref 还是 Reactive？

选择 ref 的情况：
当需要管理单一值（如计数器、布尔标志位）或希望明确区分响应式数据与普通数据时，ref 是更直观的选择。
选择 reactive 的情况：
当处理包含多个属性的对象或数组时，reactive 可以避免嵌套 .value，代码更简洁。

进阶技巧：
可以通过 toRef 将 reactive 对象中的某个属性转为 ref，例如：

const user = reactive({ name: 'Alice' });  
const nameRef = toRef(user, 'name');  
nameRef.value = 'Bob'; // 修改 user.name

三、Ref 的高级用法与常见场景

3.1 在组件间传递 Ref

当需要在父子组件间共享 ref 数据时，可以通过 props 或 provide/inject 实现。例如：

// 父组件  
const count = ref(0);  
<ChildComponent :countProp="count" />  

// 子组件  
props: {  
  countProp: {  
    type: Object,  
    required: true  
  }  
},  
setup(props) {  
  console.log(props.countProp.value); // 访问父组件的 count.value  
}

3.2 Ref 在模板中的智能解包

Vue 模板会自动识别 ref 对象并解包 .value，但需要注意以下例外情况：

当 ref 的值本身是一个对象或数组时：

const items = ref([1, 2, 3]);  
// 模板中直接使用 items.length 会触发解包  
{{ items.length }} // 输出 3（等价于 items.value.length）

需要操作 ref 的原始对象时：
必须显式使用 .value，例如：

// 正确做法  
items.value.push(4);  
// 错误做法（不会触发响应式更新）  
items.push(4); // items 是 ref 对象，而非数组

3.3 Ref 的组合与计算属性

可以通过 computed 结合 ref 实现动态计算：

const firstName = ref('Alice');  
const lastName = ref('Smith');  
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

在模板中直接使用 {{ fullName }} 即可自动更新。

四、常见误区与最佳实践

4.1 直接返回原始值的陷阱

如果错误地将 ref 的值直接赋值给非响应式变量，会导致失去响应式追踪。例如：

const count = ref(0);  
let nonReactive = count; // 错误！nonReactive 是 ref 对象  
nonReactive.value = 1; // 正确修改  
nonReactive = 2; // 错误！此时 nonReactive 是数字，不再关联原始 ref

4.2 在 Setup 函数外使用 Ref

Vue 的组合式 API 要求所有 ref 必须在 setup() 或 <script setup> 中声明，否则无法触发响应式更新。

4.3 性能优化建议

避免深层嵌套的 ref：
当需要管理复杂对象时，优先使用 reactive 而非多层 ref。
谨慎使用 .value 的直接暴露：
在组件 Props 中传递 ref 时，建议通过计算属性或方法间接访问，避免外部直接修改内部状态。

五、实际案例：构建购物车组件

5.1 需求分析

实现一个简单的购物车，包含以下功能：

添加商品到购物车
计算总价
清空购物车

5.2 代码实现

<script setup>  
import { ref, computed } from 'vue';  

const products = ref([  
  { id: 1, name: 'Apple', price: 2.99 },  
  { id: 2, name: 'Banana', price: 0.99 }  
]);  

const cart = ref([]);  

const addToCart = (product) => {  
  cart.value.push({ ...product, quantity: 1 });  
};  

const total = computed(() => {  
  return cart.value.reduce((sum, item) => sum + item.price * item.quantity, 0);  
});  

const clearCart = () => {  
  cart.value = []; // 直接赋值新数组触发响应式更新  
};  
</script>  

<template>  
  <div>  
    <!-- 商品列表 -->  
    <div v-for="product in products" :key="product.id">  
      {{ product.name }} - ${{ product.price }}  
      <button @click="addToCart(product)">加入购物车</button>  
    </div>  

    <!-- 购物车 -->  
    <div v-if="cart.length > 0">  
      <h3>购物车</h3>  
      <div v-for="item in cart" :key="item.id">  
        {{ item.name }} × {{ item.quantity }}  
      </div>  
      <div>总价：${{ total }}</div>  
      <button @click="clearCart">清空购物车</button>  
    </div>  
  </div>  
</template>

六、结论

Vue3 的 ref 是构建响应式应用的核心工具，其简洁的语法和灵活的特性适用于从简单值到复杂对象的各类场景。通过对比 ref 与 reactive 的差异、掌握响应式原理与常见陷阱，开发者可以更高效地利用这一工具实现功能丰富的前端应用。无论是管理状态、组件间通信，还是优化性能，ref 都能提供强大的支持。建议读者通过实际项目练习，并结合官方文档深入探索其高级用法，从而在 Vue 开发中游刃有余。

vue3 ref（手把手讲解）

一、Vue3 Ref 的基础用法与响应式特性

1.1 什么是 Ref？

1.2 Ref 的响应式原理

二、Ref 与 Reactive 的对比与选择

2.1 基础对比

2.2 选择 Ref 还是 Reactive？

三、Ref 的高级用法与常见场景

3.1 在组件间传递 Ref

3.2 Ref 在模板中的智能解包

3.3 Ref 的组合与计算属性

四、常见误区与最佳实践

4.1 直接返回原始值的陷阱

4.2 在 Setup 函数外使用 Ref

4.3 性能优化建议

五、实际案例：构建购物车组件

5.1 需求分析

5.2 代码实现

六、结论

最新发布

Vue3 app.runWithContext() 函数（建议收藏）

Vue3 app.version 属性（一文讲透）

Vue3 app.config 属性（手把手讲解）

Vue3 app.config.errorHandler 属性（保姆级教程）

Vue3 app.config.warnHandler 属性（长文讲解）

Vue3 app.config.performance 属性（超详细）

Vue3 app.config.compilerOptions 属性（千字长文）

Vue3 app.config.globalProperties 属性（保姆级教程）

Vue3 app.config.optionMergeStrategies 属性（千字长文）

Vue3 app.config.idPrefix 属性（保姆级教程）