前端核心知识：Vue 3 编程的 10 个实用技巧

Ne0inhk

— 7 min read
前端核心知识：Vue 3 编程的 10 个实用技巧
在这里插入图片描述

文章目录

在这里插入图片描述

1. 使用 ref 和 reactive 管理响应式数据

在这里插入图片描述

原理解析

Vue 3 引入了 ref 和 reactive 两个核心 API 来管理响应式数据：

  • ref：用于创建基本类型（如字符串、数字）的响应式数据，返回一个包含 value 属性的对象。
  • reactive：用于创建复杂对象或数组的响应式数据，返回一个代理对象。

代码示例

import{ ref, reactive }from'vue';// 使用 ref 管理基本类型数据const count =ref(0); console.log(count.value);// 0// 使用 reactive 管理复杂对象const state =reactive({name:'Vue 3',version:'3.2.0',}); console.log(state.name);// Vue 3

注意事项

  • 使用 ref 时，需要通过 .value 访问或修改数据。
  • reactive 只能用于对象或数组，不能用于基本类型。

2. 组合式 API（Composition API）

在这里插入图片描述

原理解析

组合式 API 是 Vue 3 的核心特性之一，它允许开发者将逻辑代码组织成可复用的函数，而不是依赖于选项式 API（如 data、methods 等）。通过 setup 函数，开发者可以更灵活地管理组件的状态和逻辑。

代码示例

import{ ref, computed }from'vue';exportdefault{setup(){const count =ref(0);const doubleCount =computed(()=> count.value *2);functionincrement(){ count.value++;}return{ count, doubleCount, increment,};},};

优势

  • 逻辑复用性更强。
  • 代码组织更清晰，尤其是复杂组件。

3. 使用 watch 和 watchEffect 监听数据变化

在这里插入图片描述

原理解析

  • watch：用于监听特定响应式数据的变化，支持深度监听和懒执行。
  • watchEffect：自动追踪其依赖的响应式数据，并在依赖变化时立即执行。

代码示例

import{ ref, watch, watchEffect }from'vue';const count =ref(0);// 使用 watch 监听 count 的变化watch(count,(newValue, oldValue)=>{ console.log(`count changed from ${oldValue} to ${newValue}`);});// 使用 watchEffect 自动追踪依赖watchEffect(()=>{ console.log(`count is now ${count.value}`);});

注意事项

  • watch 更适合精确控制监听逻辑。
  • watchEffect 适合不需要明确指定依赖的场景。

4. 使用 provide 和 inject 实现跨组件通信

原理解析

provide 和 inject 是 Vue 3 中实现跨组件通信的 API，特别适合在深层嵌套组件中传递数据。

代码示例

// 父组件import{ provide, ref }from'vue';exportdefault{setup(){const message =ref('Hello from parent');provide('message', message);},};// 子组件import{ inject }from'vue';exportdefault{setup(){const message =inject('message');return{ message };},};

优势

  • 避免逐层传递 props 的繁琐。
  • 适合全局状态管理（如主题、用户信息等）。
在这里插入图片描述

5. 使用 Teleport 实现组件挂载到任意位置

原理解析

Teleport 是 Vue 3 新增的特性，允许将组件的内容渲染到 DOM 中的任意位置，常用于模态框、通知等场景。

代码示例

<template><button@click="showModal = true">Open Modal</button><Teleportto="body"><divv-if="showModal"class="modal"><p>This is a modal!</p><button@click="showModal = false">Close</button></div></Teleport></template><script>import{ ref }from'vue';exportdefault{setup(){const showModal =ref(false);return{ showModal };},};</script>

优势

  • 解决组件层级和样式隔离问题。
  • 提升用户体验。

6. 使用 Suspense 处理异步组件加载

原理解析

Suspense 是 Vue 3 中用于处理异步组件加载的特性，可以在组件加载完成前显示占位内容。

代码示例

<template><Suspense><template#default><AsyncComponent/></template><template#fallback><div>Loading...</div></template></Suspense></template><script>import{ defineAsyncComponent }from'vue';const AsyncComponent =defineAsyncComponent(()=>import('./AsyncComponent.vue'));exportdefault{components:{ AsyncComponent,},};</script>

优势

  • 提升用户体验，避免页面空白。
  • 简化异步组件加载逻辑。
在这里插入图片描述

7. 使用 v-model 实现双向绑定

原理解析

Vue 3 对 v-model 进行了改进，支持多个 v-model 绑定，并可以通过 modelValue 和 update:modelValue 自定义绑定逻辑。

代码示例

<template><CustomInputv-model:firstName="firstName"v-model:lastName="lastName"/></template><script>import{ ref }from'vue';exportdefault{setup(){const firstName =ref('John');const lastName =ref('Doe');return{ firstName, lastName };},};</script>

自定义组件 CustomInput

<template><input:value="firstName"@input="$emit('update:firstName', $event.target.value)"/><input:value="lastName"@input="$emit('update:lastName', $event.target.value)"/></template><script>exportdefault{props:['firstName','lastName'],};</script>

优势

  • 支持多个 v-model 绑定。
  • 更灵活的双向绑定实现。

8. 使用 defineComponent 增强 TypeScript 支持

在这里插入图片描述

原理解析

defineComponent 是 Vue 3 中用于增强 TypeScript 支持的 API，可以提供更好的类型推断和代码提示。

代码示例

import{ defineComponent, ref }from'vue';exportdefaultdefineComponent({setup(){const count =ref(0);return{ count };},});

优势

  • 提升 TypeScript 开发体验。
  • 更好的类型安全和代码提示。

9. 使用 Fragment 减少不必要的 DOM 元素

原理解析

Vue 3 支持多根节点组件（Fragment），可以减少不必要的 DOM 元素，提升渲染性能。

代码示例

<template><header>Header</header><main>Main Content</main><footer>Footer</footer></template>

优势

  • 减少不必要的 DOM 层级。
  • 提升渲染性能。

10. 使用 Custom Directives 自定义指令

在这里插入图片描述

原理解析

Vue 3 允许开发者自定义指令，用于直接操作 DOM 元素。

代码示例

import{ directive }from'vue';const vFocus ={mounted(el){ el.focus();},};exportdefault{directives:{focus: vFocus,},};

使用示例

<inputv-focus/>

优势

  • 提供更灵活的 DOM 操作能力。
  • 适合实现特定功能（如自动聚焦、拖拽等）。

总结

本文详细介绍了 Vue 3 编程中的 10 个实用技巧，涵盖了响应式数据管理、组合式 API、跨组件通信、异步组件加载等多个方面。通过掌握这些技巧，开发者可以更高效地构建现代化的 Vue 应用，提升代码质量和开发体验。希望本文能为您的 Vue 3 开发之旅提供帮助！

Read more

【强化学习】近端策略优化算法(PPO)万字详解（附代码）

【强化学习】近端策略优化算法(PPO)万字详解（附代码）

📢本篇文章是博主强化学习（RL）领域学习时，用于个人学习、研究或者欣赏使用，并基于博主对相关等领域的一些理解而记录的学习摘录和笔记，若有不当和侵权之处，指出后将会立即改正，还望谅解。文章分类在👉强化学习专栏：        【强化学习】- 【单智能体强化学习】（9）---《近端策略优化算法(PPO)详解》 近端策略优化算法(PPO)详解 目录 PPO算法介绍 1. 背景 2. PPO 的核心思想 3. PPO 流程 4. 为什么 PPO 很强？ 5. PPO 的直观类比 PPO算法的流程推导及数学公式 1. 背景与目标 2. PPO的概率比率 3. 优化目标 4. 值函数优化 5. 策略熵正则化

By Ne0inhk
模拟实现B-树详解

模拟实现B-树详解

目录 B-树 定义 特性 B-树的插入分析 B-树插入总结 模拟实现B-树 基本结构  寻找插入位置  插入元素 分裂节点  中序遍历 完整代码  代码测试 B-树的删除 B-树的优点 B-树的应用场景 B+树 B+树的优势 B+树的应用场景 B+树与B树的区别 B*树 特点 B*树的优势 总结 B-树 定义 B-树是一种平衡的M（M>=2）路查找树，B-树也可以是空树，每个节点可以拥有多个子节点，从而有效减少树的高度，提高查找效率。 特性 1. 根节点至少有两个孩子； 2. 每个非根节点至少有M/2-1(上取整)个关键字,

By Ne0inhk
我的算法修炼之路--5——专破“思维陷阱”，那些让你拍案叫绝的非常规秒解

我的算法修炼之路--5——专破“思维陷阱”，那些让你拍案叫绝的非常规秒解

💗博主介绍：计算机专业的一枚大学生 来自重庆 @燃于AC之乐✌专注于C++技术栈，算法，竞赛领域，技术学习和项目实战✌💗 💗根据博主的学习进度更新（可能不及时） 💗后续更新主要内容：C语言，数据结构，C++、linux（系统编程和网络编程）、MySQL、Redis、QT、Python、Git、爬虫、数据可视化、小程序、AI大模型接入，C++实战项目与学习分享。 👇🏻 精彩专栏 推荐订阅👇🏻 点击进入🌌作者专栏🌌： 算法画解 ✅ C++ ✅ 🌟算法相关题目点击即可进入实操🌟 感兴趣的可以先收藏起来，请多多支持，还有大家有相关问题都可以给我留言咨询，希望希望共同交流心得，一起进步，你我陪伴，学习路上不孤单！ 文章目录 * 前言 * 题目清单 * 1.Metoer Shower（流星雨） * 2.

By Ne0inhk
算法王冠上的明珠——动态规划之路径问题(第一篇）

算法王冠上的明珠——动态规划之路径问题(第一篇）

目录 1. 什么叫路径类动态规划 一、核心定义（通俗理解） 二、核心特征（识别这类问题的关键） 2. 动态规划步骤 状态表示 状态转移方程 初始化 填表顺序 返回值 3. 例题讲解 3.1 LeetCode62. 不同路径 3.2 LeetCode63. 不同路径 II 3.3 LeetCodeLCR 166. 珠宝的最高价值 今天我们来聊一聊动态规划的路径类问题。 1. 什么叫路径类动态规划 路径类动态规划是 动态规划的一个重要分支，核心解决 “从起点到终点的路径相关问题”—— 比如 “路径总数”“最短路径长度”“路径上的最大 / 最小和” 等，其本质是通过 “状态递推” 避免重复计算，高效求解多阶段决策的路径问题。 一、

By Ne0inhk