Vue3 共 29 篇文章

Vue3 watchEffect和watch的区别与副作用清理

2026-05-18 19:22:22

Vue3 watchEffect和watch的区别与副作用清理 在 Vue 3 的组合式 API 中，watchEffect 和 watch 是用于监听响应式数据变化并执行副作用的两个核心函数。理解它们的区别及如何正确清理副作用，是编写健壮、高效代码的关键。 核心区别速览 选择哪个函数，取决于你的具

Vue3 watchEffect watch

24 0

Vue3的Teleport组件解决模态框层级与定位问题

2026-05-17 00:11:23

Vue3的Teleport组件解决模态框层级与定位问题 在开发 Vue 应用时，经常会遇到弹窗、模态框或提示气泡等 UI 组件被父容器的样式“卡住”的情况。具体表现为：设置了极高的 zindex 依然被其他元素遮挡，或者由于父容器设置了 overflow: hidden 导致弹窗内容被截断。这是因为

Vue3 Teleport 模态框

38 0

Vue3 defineExpose控制子组件暴露给父组件的方法

2026-05-16 12:18:31

Vue3 defineExpose控制子组件暴露给父组件的方法 Vue 3 的 <script setup 语法糖极大地简化了组件编写，但也带来了一个问题：组件内的变量和方法默认是私有的，父组件无法直接通过 ref 获取。为了解决这个问题，Vue 提供了 defineExpose 宏。通过它，你可以

Vue3 组件通信 子组件

28 0

Vue的v-model在自定义组件上的语法糖实现原理

2026-05-16 03:22:19

Vue的vmodel在自定义组件上的语法糖实现原理 vmodel 本质上是 value 属性绑定与 input 事件监听的语法糖。在自定义组件中，理解这一机制能够帮助开发者构建更具复用性的表单组件。以下是基于 Vue 3 的实现与解构步骤。 1. 核心原理拆解 vmodel 在编译时会被 Vue 模

Vue.js Vue3 v-model

38 0

Vue3 customRef创建自定义响应式引用的防抖输入

2026-05-13 18:10:17

Vue3 customRef创建自定义响应式引用的防抖输入 在Vue3中处理表单输入时，为避免频繁触发搜索请求或页面重渲染，通常需要对输入事件进行防抖处理。使用customRef可以创建一个具备内置防抖功能的响应式引用，从而将防抖逻辑从业务组件中解耦，实现逻辑复用。 核心原理分析 customRef

Vue3 防抖 响应式

40 0

Vue3 DefineModel在双向绑定组件中的使用

2026-05-10 23:22:22

Vue3 DefineModel在双向绑定组件中的使用 在Vue 3中，defineModel 是一个简化组件双向绑定的Composition API宏。它让创建可复用的表单组件变得更加简单和直观，无需手动处理props和$emit。 1. 传统双向绑定的痛点 在defineModel出现之前，要实

Vue3 defineModel 双向绑定

36 0

Vue3 v-memo缓存v-for列表项减少不必要的更新

2026-05-10 09:25:38

Vue3 vmemo缓存vfor列表项减少不必要的更新 在Vue3中，vfor是渲染列表的常用指令。当列表数据更新时，Vue会尝试高效地更新DOM。然而，对于大型或复杂的列表，即使只有少量数据发生变化，Vue也可能重新渲染整个列表，导致不必要的性能开销。 问题：不必要的列表项更新 考虑一个用户列表，

Vue3 v-memo v-for

39 0

Vue3 defineOptions在setup语法糖中定义组件选项

2026-05-10 00:16:11

Vue3 defineOptions在setup语法糖中定义组件选项 在 Vue3 的 setup 语法糖中，defineOptions 是一个非常有用的 API，它允许你在 <script setup 中直接定义组件选项，而无需离开 setup 上下文。这个特性解决了传统 Vue2 和早期 Vue

Vue3 defineOptions setup语法糖

36 0

Vue3 useCssModule在组合式API中使用CSS Modules

2026-05-09 05:27:49

Vue3 useCssModule在组合式API中使用CSS Modules 在 Vue3 的组合式 API 中，useCssModule 是一个非常有用的工具，它能让你方便地在 <script setup 中访问 CSS Modules 生成的类名。本文将手把手教你如何使用它。 什么是 CSS M

Vue3 useCssModule 组合式API

40 0

Vue3的Proxy响应式为什么比Vue2的defineProperty更好

2026-05-06 13:18:24

Vue3的Proxy响应式为什么比Vue2的defineProperty更好 Vue 的响应式系统是其核心功能之一，它决定了数据变化如何自动触发视图更新。从 Vue2 升级到 Vue3，最底层的变化就是将 Object.defineProperty 替换为了 Proxy。这不仅是语法的升级，更是能力

Vue3 Vue2 响应式

40 0

Vue3 isRef/isReactive/isProxy响应式类型判断工具

2026-05-04 02:13:24

Vue3 isRef/isReactive/isProxy响应式类型判断工具 在 Vue3 开发中，组件间传递的数据类型多种多样，编写通用函数或处理解构后的数据时，往往需要明确判断变量是否具有响应式能力。直接通过 typeof 或 instanceof 无法准确识别 Vue 内部封装的代理对象。使用

Vue3 响应式 isRef

46 0

Vue3 effectScope管理副作用的创建与销毁

2026-05-03 13:23:18

Vue3 effectScope管理副作用的创建与销毁 在 Vue 3 的组合式 API 中，watch、watchEffect 和 computed 等响应式 API 会产生“副作用”。在组件内部，Vue 会在组件卸载时自动清理这些副作用。但在组件外部（如在工具函数、插件或独立的逻辑复用模块中）使

Vue3 副作用管理 组合式API

44 0

Vue3 markRaw标记对象跳过响应式代理提升性能

2026-05-02 07:24:13

Vue3 markRaw标记对象跳过响应式代理提升性能 Vue3 的响应式系统基于 Proxy 构建，能自动追踪依赖并在数据变化时触发视图更新。但在处理一些只读、庞大或第三方库对象时，强制将其转化为响应式对象不仅浪费内存，还会导致不必要的性能开销。markRaw API 专门用于解决这一问题，它可以

Vue3 markRaw 响应式

44 0

Vue3 onWatcherCleanup注册侦听器清理回调

2026-05-02 06:16:48

Vue3 onWatcherCleanup注册侦听器清理回调 在 Vue 3.5+ 版本中，处理侦听器（Watcher）内部的副作用清理变得更加直观和安全。过去，我们需要在 watch 或 watchEffect 的回调函数中手动返回一个清理函数，或者依赖 onUnmounted 钩子。这种方式在处

Vue3 Vue3.5 侦听器清理

42 0

Vue3 useTemplateRef获取模板引用的组合式API

2026-05-01 12:18:22

Vue3 useTemplateRef获取模板引用的组合式API Vue 3.5 版本引入了 useTemplateRef API，它提供了一种更符合直觉且类型安全的方式来获取 DOM 元素或组件实例。相比旧版的 refnull 写法，新 API 减少了冗余代码，并自动推导模板引用的类型。以下是基于

Vue3 模板引用 组合式API

48 0

Vue3 defineSlots类型化插槽的TypeScript支持

2026-04-29 09:23:17

Vue3 defineSlots类型化插槽的TypeScript支持 在 Vue 3.3+ 版本中，defineSlots 宏的引入为组件插槽带来了完整的 TypeScript 类型推断能力。这意味着在父组件中使用插槽时，IDE 可以准确地自动补全插槽暴露的 props（参数），并在类型不匹配时直接

Vue3 TypeScript defineSlots

40 0

Vue3 h函数手写渲染函数替代模板的场景

2026-04-29 00:21:20

Vue3 h函数手写渲染函数替代模板的场景 Vue 3 的 h 函数（即 hyperscript）提供了一种直接通过 JavaScript 代码创建虚拟节点（VNode）的方式。在某些特定场景下，放弃模板转而使用 h 函数手写渲染函数，能显著提升代码的灵活性和控制力。 理解 h 函数的核心参数 在使

Vue3 h函数 渲染函数

47 0

Vue3 readonly与shallowReadonly保护状态不被修改

2026-04-28 17:23:25

Vue3 readonly与shallowReadonly保护状态不被修改 Vue3提供了多种状态管理方式，其中readonly和shallowReadonly是保护状态不被修改的重要工具。理解这两个API的工作原理和适用场景，可以帮助开发者更好地控制应用状态，避免意外的状态变更。 1. 认识rea

Vue3 readonly 状态保护

50 0

Vue3 triggerRef手动触发shallowRef的响应式更新

2026-04-25 15:19:18

Vue3 triggerRef手动触发shallowRef的响应式更新 在 Vue 3 的响应式系统中，ref 和 reactive 是构建数据驱动视图的核心。然而，在处理大型数据结构或性能敏感场景时，Vue 3 提供了 shallowRef 和 shallowReactive 这样的“浅层响应式”

Vue3 响应式 浅层响应式

54 0

Vue3 defineModel简化v-model双向绑定的宏

2026-04-24 17:24:39

Vue3 defineModel简化vmodel双向绑定的宏 在Vue2中实现组件双向绑定需要props和emit组合使用，过程繁琐且代码量大。Vue3引入了defineModel宏函数，彻底简化了vmodel的实现方式，让开发者能够以更直观的方式处理组件间数据同步。 Vue2中的vmodel实现回

Vue3 v-model 双向绑定

51 0