Vue3 共 37 篇文章

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

2026-05-02 07:24:13

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

Vue3 markRaw 响应式

117 0

Vue3 onWatcherCleanup注册侦听器清理回调

2026-05-02 06:16:48

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

Vue3 Vue3.5 侦听器清理

97 0

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

2026-05-01 12:18:22

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

Vue3 模板引用 组合式API

118 0

Vue3 defineSlots类型化插槽的TypeScript支持

2026-04-29 09:23:17

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

Vue3 TypeScript defineSlots

114 0

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

2026-04-29 00:21:20

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

Vue3 h函数 渲染函数

90 0

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

2026-04-28 17:23:25

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

Vue3 readonly 状态保护

99 0

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

2026-04-25 15:19:18

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

Vue3 响应式 浅层响应式

144 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 双向绑定

98 0

Vue3的Pinia比Vuex好在哪：对比分析与迁移

2026-04-21 15:24:15

Vue3的Pinia比Vuex好在哪：对比分析与迁移 Pinia作为Vue3官方推荐的状态管理库，相比Vuex有着明显的优势。本文将深入分析Pinia的优势，并提供从Vuex迁移到Pinia的实用指南。 Pinia与Vuex的基本概念 理解 Pinia：Pinia是一个轻量级的状态管理库，专为Vue

Vue3 Pinia Vuex

122 0

Vue的异步组件与Suspense组件配合实现加载态

2026-04-21 09:23:19

Vue的异步组件与Suspense组件配合实现加载态 在 Vue 3 开发中，处理数据请求延迟或大组件加载时的白屏问题，通常需要编写繁琐的 ifelse 逻辑或维护额外的 loading 状态变量。利用 Vue 的 defineAsyncComponent 与 <Suspense 组件的组合，可以将

Vue3 异步组件 Suspense

105 0

Vue3 Vapor Mode无虚拟DOM编译模式的性能提升

2026-04-21 03:18:04

Vue3 Vapor Mode无虚拟DOM编译模式的性能提升 Vue3 的 Vapor Mode 是一种全新的编译策略，旨在通过抛弃传统的虚拟 DOM（Virtual DOM）机制，进一步提升框架的运行时性能。与传统的 Vue 3 模式相比，Vapor Mode 在编译阶段做更多的工作，生成更高效、

Vue3 Vapor模式 无虚拟DOM

133 0

Vue的keep-alive缓存组件导致数据不更新的处理

2026-04-21 01:19:08

Vue的keepalive缓存组件导致数据不更新的处理 在 Vue 项目中使用 <keepalive 组件可以缓存不活动的组件实例，从而保留状态或避免重复渲染，提升用户体验。然而，这也会带来一个常见问题：当从后台修改数据后，再次回到被缓存的页面时，页面显示的依然是旧数据，因为组件并没有重新执行 cr

Vue 组件缓存 数据更新

141 0

Vue3 watch的deep选项监听嵌套对象变化的性能开销

2026-04-20 23:28:03

Vue3 watch的deep选项监听嵌套对象变化的性能开销 在 Vue3 开发中，监听嵌套对象的变化是一个常见需求。许多开发者习惯性地给 watch 函数添加 deep: true 选项。虽然这能解决问题，但它往往带来巨大的性能开销，特别是在数据结构庞大或层级较深时。当对象发生变化，Vue 必须递

Vue3 watch deep选项

122 0

Vue3 Composition API中ref和reactive该怎么选

2026-04-20 10:26:48

Vue3 Composition API中ref和reactive该怎么选 Vue3 引入 Composition API 后，响应式系统的构建方式发生了变化。核心的选择难题集中在 ref 和 reactive 两个 API 上。这两者虽然功能类似，但在使用场景和代码风格上有着本质区别。选择正确的

Vue3 组合式API ref

137 0

Vue 路由：Vue Router 配置与导航守卫

2026-04-18 07:23:25

Vue 路由：Vue Router 配置与导航守卫 在 Vue.js 单页应用开发中，页面跳转和权限控制是核心功能。Vue Router 作为官方管理器，负责将 URL 路径映射到组件，并控制导航流程。以下指南将详细介绍如何从零配置路由，并利用导航守卫实现精准的权限拦截。 一、 基础环境搭建与配置

VueRouter 路由配置 导航守卫

88 0

Vue 组件：单文件组件与组合式 API

2026-04-13 00:20:48

Vue 组件：单文件组件与组合式 API Vue 3 引入的组合式 API（Composition API）配合单文件组件（SFC），极大地提升了代码的逻辑复用性和类型推导能力。本指南将详细介绍如何从零开始构建一个结构清晰、逻辑严密的 Vue 组件。 理解单文件组件结构 单文件组件（.vue 文件）

Vue3 Vue组件 单文件组件

98 0

JavaScript Proxy拦截对象操作实现响应式系统

2026-04-05 16:12:47

JavaScript Proxy 拦截对象操作实现响应式系统 响应式系统是现代前端框架的核心能力之一。当你修改数据时，视图自动更新；当你订阅状态变化时，界面实时响应。Vue 3 的响应式系统正是基于 Proxy 实现的，这篇文章将带你从零构建一个完整的响应式系统。 理解 Proxy 的拦截机制 Pr

JavaScript Proxy 响应式系统

112 0