- 博客(93)
- 收藏
- 关注
RSS订阅原创 Vue 3 的watch的flush选项：介绍flush选项对侦听器触发时机的影响
Vue3 的 watch 侦听器提供了 flush 选项，用于控制回调执行时机，平衡性能与开发体验。默认 pre 模式在 DOM 更新前执行，适合基于新数据的逻辑处理；post 模式在 DOM 更新后执行，适合依赖最新 DOM 的操作；sync 则立即同步执行，打破 Vue 的批处理机制。理解不同 flush 选项的执行时机（pre→DOM更新→post→nextTick）能帮助开发者更精准地控制侦听器行为，优化应用性能与功能实现。
2025-12-24 07:00:00
905
原创 Vue 3 的ref自动解包：讲解模板中ref值的自动解包行为
摘要 Vue 3的ref通过包装原始类型解决了响应式问题，使用.value访问内部值。其核心设计是将数据封装为响应式对象，并通过Proxy监听变化。与reactive不同，ref适用于所有类型，而reactive仅处理对象。 在模板中，Vue 3的自动解包机制允许直接使用ref变量而无需.value，简化了代码。例如{{ count }}会自动解析为count.value，提升了开发体验。这一特性使ref在模板和脚本中的使用更直观，同时保持了响应式能力。 关键词：Vue 3、ref、响应式、自动解包、模板语
2025-12-24 07:00:00
1165
原创 Vue 3 的watch的deep选项：介绍如何深度监听对象或数组的变化
摘要 本文系统介绍了Vue3中watch API的深度监视功能。从基础概念出发，阐述了watch与computed的核心区别：前者关注数据变化时的副作用操作，后者关注派生值的计算。重点讲解了watch的deep选项，它能够穿透对象表层监视嵌套属性的变化，解决了默认浅层监视的局限性。文章详细分析了deep选项的使用场景、性能影响、实现原理及优化策略，并提供了多个实战案例，包括表单验证、状态同步和API请求等。最后总结了合理使用deep的注意事项，帮助开发者掌握这一响应式系统的进阶功能。
2025-12-23 07:00:00
2516
原创 Vue 3 的watch的immediate选项：讲解immediate选项的作用及使用场景
本文深入解析Vue.js中watch的immediate选项，解决组件初始化时数据监听不触发的问题。通过用户详情页案例展示传统watch无法在首次加载时执行回调的缺陷，引入immediate: true选项可强制在侦听器创建时立即执行回调，实现初始化加载与变化更新的统一处理。文章对比了使用onMounted的冗余方案与immediate的优雅方案，强调该选项如何简化代码逻辑，避免重复调用，是Vue响应式编程中的重要技巧。
2025-12-23 07:00:00
1103
原创 Vue 3 的watch监听多个数据源：讲解如何同时监听多个响应式数据的变化
本文介绍了Vue 3中监听多个数据源的必要性和实现方法。文章首先分析了需要监听多个数据源的常见场景，如表单联动验证、数据筛选搜索等。然后详细讲解了watch和watchEffect的核心区别：watch需要明确指定监听目标，而watchEffect会自动追踪函数内访问的响应式数据。通过代码示例展示了两种API的基本用法，并提供了对比表格帮助开发者根据需求选择合适的监听方式。掌握这些技巧可以帮助开发者更好地处理复杂业务逻辑，使代码更加清晰高效。
2025-12-22 22:48:09
1213
1
原创 Vue 3 的响应式数据解构：讲解如何正确解构响应式对象而不丢失响应性
本文深入解析Vue 3响应式系统的核心原理，重点探讨了reactive和ref两大API的区别与使用场景。文章通过生动的比喻（如将reactive比作"乐高城堡模型"、ref比作"智能保险箱"），帮助读者理解Proxy代理机制和响应式包装的本质。特别剖析了JavaScript解构赋值与Vue响应式系统的冲突原因，指出解构会破坏响应式连接的关键问题，为后续讲解正确的解构方法奠定理论基础。
2025-12-04 07:00:00
1749
原创 Vue 3 的computed的setter：介绍如何为计算属性定义setter函数
本文深入解析Vue 3中computed属性的setter功能。首先介绍了标准computed属性的getter特性，包括其依赖追踪、缓存机制和惰性求值等核心特点。通过与methods的对比，强调了computed在性能优化方面的优势。重点探讨了computed setter的实现原理和使用场景，如实现双向数据绑定、表单数据处理等。文章通过具体代码示例，展示了如何利用setter实现数据的逆向更新，从而构建更灵活、高效的Vue应用。全文旨在帮助开发者深入理解computed属性的双向绑定机制，提升组件开发能
2025-12-04 07:00:00
914
原创 Vue 3 的Teleport多个目标：讲解如何将内容传送到多个目标位置
本文深入解析Vue3的Teleport组件，从单目标使用入手为多目标应用奠定基础。Teleport可将模板部分"传送"至DOM其他位置，同时保持组件逻辑状态，实现逻辑归属与渲染分离。核心语法包含to属性（指定目标选择器）和disabled属性（动态开关传送功能）。通过全屏模态框的实战案例，展示了Teleport如何解决组件嵌套导致的样式限制问题。文章强调Teleport的价值在于保持组件逻辑完整性的同时实现渲染位置的灵活性，为后续探讨多目标Teleport应用提供了理论和技术基础。
2025-12-03 07:00:00
1256
原创 Vue 3 的Suspense多个异步依赖：介绍如何处理多个异步组件的加载状态
本文探讨了Vue 3中Suspense组件的应用价值。通过对比传统异步编程方式（回调、Promise、async/await）和Vue 2时代手动管理loading状态的局限性，揭示了Suspense如何优雅解决"加载状态地狱"问题。Suspense作为异步协调者，能够声明式地管理多个异步依赖的加载状态，避免繁琐的命令式状态管理，实现更流畅的用户体验。文章将从基础概念入手，深入探讨嵌套、错误处理等高级用法，帮助开发者掌握这一提升前端开发效率的重要工具。
2025-12-03 07:00:00
1334
原创 Vue 3 的自定义指令参数：讲解如何向自定义指令传递参数
本文介绍了Vue 3中自定义指令的参数传递机制，重点解析了三种参数类型：动态值、指令参数和修饰符。文章通过创建v-focus和v-color两个实用指令示例，详细讲解了如何通过binding.value接收动态参数，实现指令行为的灵活配置。其中，v-color指令演示了如何响应式地改变文本颜色，展示了指令与组件数据的交互方式。这些核心概念为开发可复用、可配置的自定义指令提供了基础，体现了Vue指令系统的强大灵活性。
2025-12-02 07:00:00
1231
原创 Vue 3 的指令动态绑定：介绍如何动态绑定指令（如v-if=_condition_）
本文介绍了Vue指令的基础概念与常见用法。指令是Vue模板中以v-开头的特殊属性，用于控制DOM元素的行为。文章详细解析了指令的结构（指令名、参数、修饰符和值），并通过类比"魔法咒语"和"多功能遥控器"帮助理解。重点讲解了两种条件渲染指令：v-if会实际创建/销毁DOM元素，适合低频切换场景；v-show仅切换CSS的display属性，适合高频切换场景。通过代码示例和对比表格，清晰展示了二者的区别与适用场景，为后续学习动态指令打下基础。
2025-12-02 07:00:00
992
原创 Vue 3 的插槽默认内容：讲解如何为插槽提供默认内容
本文介绍了Vue插槽默认内容的核心概念与实现方法。插槽默认内容相当于组件的"出厂默认值"，当父组件未提供内容时显示。通过<slot>默认内容</slot>语法即可实现，其渲染机制遵循"二选一"逻辑：父组件提供内容则显示，否则显示默认内容。文章以按钮组件为例，演示了如何创建带默认文本的BaseButton组件，并强调区分"未提供内容"和"提供空内容"的关键差异。
2025-12-01 07:00:00
1121
原创 Vue 3 的动态指令参数：介绍如何使用动态参数（如v-bind：[attr]）
这时候，Vue 3 的动态指令参数就该闪亮登场了。它就像一把“万能钥匙”，允许我们将指令的参数本身也变成一个动态的 JavaScript 表达式。官方权威概念定义：Vue 的指令参数可以用方括号 [] 括起来，表示这是一个动态的 JavaScript 表达式。其语法格式为 v-指令:[参数表达式]。我的通俗化解读：想象一下，静态参数就像是你去餐厅点餐，直接说“我要一份宫保鸡丁”。而动态参数则像是你对服务员说：“我要一份菜单上第 X 个菜”，这个 X 可以是任何数字，由你当场决定。在 Vue 里，这个
2025-12-01 07:00:00
991
原创 Vue 3 的v-model参数：讲解如何自定义v-model的参数名
本文介绍了Vue 3中v-model的实现原理与自定义参数用法。v-model本质上是语法糖，结合属性绑定和事件监听实现双向数据绑定。Vue 3改进了v-model机制，支持自定义参数名实现多数据绑定，并通过defineModel()宏简化实现。文章展示了基础实现方式和使用计算属性优化代码的方法，使组件数据流更清晰可控，提升了开发效率和代码可维护性。
2025-11-30 07:00:00
1115
原创 Vue 3 的多个插槽使用：介绍如何在组件中使用多个插槽
文章摘要 本文深入探讨了Vue组件中插槽(slot)的核心概念与应用。首先从组件"封装"与"定制"的矛盾出发，解释了插槽存在的必要性——解决组件复用与内容定制化的冲突。通过UserCard组件的示例，展示了如何使用插槽实现灵活的内容分发。重点讲解了插槽的编译作用域规则，强调父组件模板内容在父作用域编译，子组件模板在子作用域编译的特性。文章从默认插槽(匿名插槽)入手，通过SimpleCard组件示例，演示了最基本的插槽使用方法。后续还介绍了具名插槽、作用域插槽等进阶用法
2025-11-30 07:00:00
1381
原创 Vue 3 的非Prop属性继承：讲解如何继承非Prop的HTML属性
本文深入解析Vue 3中的非Prop属性继承机制。非Prop属性指未在组件props中声明但传递给组件的属性（如class、style等）。Vue默认会将这些属性自动"继承"到组件的根元素上，类似"自动投递服务"。文章通过示例展示默认继承行为，并指出深入理解该机制的必要性——当遇到复杂组件（如多根节点、包装器组件）时，需掌握手动控制方法。后续将介绍相关API（inheritAttrs、$attrs）及高级用法，帮助开发者灵活处理各类组件设计场景。
2025-11-29 07:00:00
787
原创 Vue 3 的自定义事件验证：介绍如何验证$emit触发的事件参数
本文探讨了Vue 3中事件验证的必要性和实现方法。通过电商网站案例展示了未验证事件可能导致的数据格式错误问题，强调了事件验证作为组件间"契约"的重要性。文章详细介绍了Vue 3提供的两种验证方式：仅声明事件的数组语法和具备完整验证功能的对象语法，并分析了事件验证在健壮性、开发效率和API设计方面的三大核心价值。事件验证机制能有效阻止脏数据流动，提升组件可维护性，并促使开发者设计更稳定的组件接口。
2025-11-29 07:00:00
1137
原创 Vue 3 的组件注册方式比较：比较全局注册和局部注册的区别
“注册”这个过程，就是我们作为开发者，主动告诉 Vue：“嘿，Vue，以后你在模板里看到 `<MyButton />` 这个标签，就把它替换成我定义的那个 `MyButton.vue` 组件的模板和逻辑。”**通俗化解读**：这就像你给手机通讯录里存一个联系人。你不会每次都去记一长串电话号码，而是存一个名字“张三”。当你想给张三打电话时，只需在通讯录里找到“张三”，手机系统就会自动帮你拨出对应的号码。在这里：* **电话号码**：就是你的组件定义（那个 `.vue` 文件里的所有代码）。*
2025-11-28 07:00:00
1321
原创 Vue 3 的Props大小写问题：介绍HTML属性大小写与Props命名的关系
Vue中的Props大小写问题源于HTML与JavaScript的语言特性差异：HTML属性名大小写不敏感，而JavaScript变量名大小写敏感。Vue通过自动命名转换机制解决这一问题，核心规则是： 父组件模板中使用kebab-case（短横线命名法）传递数据 子组件脚本中使用camelCase（驼峰命名法）接收数据 Vue会自动完成两者间的转换 例如，父组件传递<child initial-message="Hello"/>，子组件通过initialMessage接收。这
2025-11-28 07:00:00
510
原创 Vue 3 的递归组件：介绍如何创建递归调用的组件
摘要 本文深入解析Vue 3递归组件的核心原理与实现方法。递归组件通过name选项实现自我引用，类似俄罗斯套娃的自相似结构。关键要素包括： 命名机制：必须定义name选项才能在模板中自我调用 终止条件：使用v-if防止无限递归，如树形结构的叶子节点判断 数据传递：通过props实现层级数据流转 样式隔离：scoped CSS避免样式冲突 递归组件特别适合处理树形菜单、评论嵌套等层级不确定的数据结构，是Vue开发中的高级技巧，需要同时掌握"油门"（递归调用）和"刹车"（
2025-11-27 07:00:00
574
原创 Vue 3 的组件命名规范：讲解Vue组件的命名约定和最佳实践
Vue 3 组件命名规范摘要 Vue 3 组件命名规范强调清晰性和一致性，主要包含以下要点： 多单词命名：避免与原生HTML标签冲突，如BaseButton而非Button PascalCase命名：推荐文件名使用首字母大写形式（如UserProfile.vue） 语义化前缀：使用Base、The、App等前缀区分组件类型 命名一致性：保持文件名、组件名和模板标签名统一 避免歧义：确保命名能清晰表达组件功能和用途 规范旨在提升代码可读性和团队协作效率，是Vue开发的重要实践。
2025-11-27 07:00:00
2600
原创 Vue 3 的动态CSS变量：介绍如何使用CSS变量实现动态样式
本文深入探讨CSS变量的核心概念与应用，为Vue 3开发奠定基础。CSS变量（自定义属性）通过--前缀声明，可在:root全局定义或局部作用域声明，使用var()函数调用。其核心优势在于值复用、继承性和动态修改能力，支持回退机制增强健壮性。通过作用域隔离和层叠特性，可实现组件化样式管理，为后续Vue 3的样式方案提供底层支持。掌握CSS变量是构建可维护、灵活前端样式系统的关键第一步。
2025-11-26 07:00:00
1228
原创 Vue 3 的函数式组件：讲解如何创建无状态函数式组件
本文介绍了Vue 3中函数式组件的核心概念与应用场景。函数式组件本质上是无状态、无实例的纯函数，仅接收props和context参数并返回VNode。相比普通组件，它具有极低的性能开销，但不支持响应式状态和生命周期。最适合用于基础展示组件（如按钮、图标）、高阶组件包装器、布局组件等场景。通过对比表格清晰展示了函数式组件与普通组件的区别，帮助开发者根据实际需求选择合适方案。
2025-11-26 07:00:00
620
原创 Vue 3 的CSS Modules支持：介绍如何在Vue组件中使用CSS Modules
本文介绍了CSS Modules在Vue 3中的核心应用。CSS Modules通过构建时的类名哈希化，解决了CSS全局作用域导致的样式冲突问题。在Vue 3中，只需在<style>标签添加module属性即可启用该功能，通过$style对象访问编译后的类名。这种方式避免了传统BEM命名规范的冗长，实现了组件样式的自动隔离，让开发者可以专注于样式逻辑而非命名问题。文章通过基础示例展示了如何在模板中绑定类名，并解释了其背后的工作原理。
2025-11-25 07:00:00
209
原创 Vue 3 的样式穿透（：deep()）：分析如何深度选择子组件样式
本文介绍了CSS Modules在Vue 3中的核心应用。CSS Modules通过构建时的类名哈希化，解决了CSS全局作用域导致的样式冲突问题。在Vue 3中，只需在<style>标签添加module属性即可启用该功能，通过$style对象访问编译后的类名。这种方式避免了传统BEM命名规范的冗长，实现了组件样式的自动隔离，让开发者可以专注于样式逻辑而非命名问题。文章通过基础示例展示了如何在模板中绑定类名，并解释了其背后的工作原理。
2025-11-25 07:00:00
1097
原创 Vue 3 的组件样式作用域（scoped）：讲解_style scoped_的作用和原理
<style scoped>` 的魔法原理：Vue 是如何做到的？好了，我们已经知道了 `<style scoped>` 是什么，以及为什么需要它。现在，最激动人心的部分来了：Vue 到底是怎么实现这种“精准打击”的？是用了什么黑科技吗？其实，Vue 用的并不是什么高深莫测的黑科技，而是一种非常巧妙、直观且易于理解的机制。我们可以把它拆解成两个步骤来看。### 2.1 第一步：给元素“上户口”——添加自定义属性当 Vue 编译一个带有 `<style scoped>` 的组件时，它会做的第一
2025-11-24 08:49:29
316
原创 Vue 3 的响应式数据注意事项：介绍响应式系统的限制和注意事项
本文深入解析Vue 3响应式系统的核心概念ref与reactive。reactive通过Proxy实现对象的深度响应式代理，具有"传染性"特性，但需警惕解构赋值会破坏响应性、直接替换整个对象会导致失效等问题。ref作为通用值容器，通过.value访问内部值，适用于基本类型和引用类型，其实现原理是在内部使用reactive包装对象。文章通过"智能管家"和"魔法盒子"等生动比喻，帮助开发者理解响应式原理，避免常见使用误区。掌握这两者的本质区别和适用场景
2025-11-24 08:48:02
213
原创 Vue 3 的数组变化侦测：介绍Vue如何检测数组变化及注意事项
摘要 本文深入解析了 Vue 3 如何通过 Proxy 实现数组变化侦测。首先阐述了响应式系统中数据与视图同步的重要性，指出数组作为前端开发中最常用的数据结构，其变化侦测尤为关键。文章对比了 Vue 2 基于 Object.defineProperty 的局限性和 Vue 3 采用 Proxy 的优势：Proxy 可以完整拦截数组的所有操作（包括变异方法、索引修改和 length 变化），无需特殊 API 就能实现响应式更新。通过通俗的"经纪人"比喻解释了 Proxy 的工作原理，并详细
2025-11-23 07:00:00
559
原创 Vue 3 的对象变化侦测：讲解Vue如何检测对象属性的变化
本文探讨了Vue3响应式系统的核心机制，重点分析Proxy相较于Vue2中Object.defineProperty的优势。Vue2的响应式实现存在无法侦测属性动态增删和数组索引修改等局限，需依赖特殊API补救。而Vue3采用ES6的Proxy作为响应式基础，通过拦截对象操作而非属性访问，完美解决了Vue2的缺陷。Proxy提供了全面的拦截能力（get/set/deleteProperty/has等），支持属性动态增删，且对数组操作更友好，为Vue3带来了更强大灵活的响应式系统。
2025-11-23 07:00:00
488
原创 Vue 3 的v-cloak指令：介绍如何使用v-cloak解决初始渲染闪烁问题
这篇文章深入探讨了Vue.js中v-cloak指令的作用与实现原理。文章首先分析了页面加载时出现的"闪烁"问题（FOUC）的根源——浏览器渲染原始模板与Vue编译执行的时间差，并指出这会降低用户体验和专业性。随后详细介绍了v-cloak的官方定义及其"施工幕布"般的运作机制：通过在HTML元素上添加该属性，配合CSS规则[v-cloak] { display: none; }，将未编译内容隐藏，直到Vue实例完成编译后自动移除该指令，确保用户只看到最终渲染结果。文章强
2025-11-22 07:00:00
165
原创 Vue 3 的v-for与v-if的优先级：讲解为什么v-for和v-if不应同时使用
本文介绍了Vue.js中v-for和v-if指令的基础用法及注意事项。v-for用于循环渲染数组和对象，通过(item, index)语法获取元素和索引，必须配合唯一:key属性以提高性能。v-if则控制元素的条件渲染，根据表达式真假决定DOM是否存在。文章通过实例演示了缺少key可能导致的问题，强调为每个循环项添加唯一标识的重要性，这能帮助Vue高效更新DOM并保持元素状态稳定。最后指出v-for和v-if在同一元素上同时使用会导致优先级冲突的问题。
2025-11-22 07:00:00
952
原创 Vue 3 的v-once指令：介绍如何使用v-once优化静态内容渲染
本文探讨了Vue3中v-once指令对渲染性能的优化作用。通过分析Vue响应式系统的运行机制，揭示了虚拟DOM和Diff算法在数据更新时的性能开销。文章指出，对于静态内容，重复的VDOM创建和比较会造成不必要的计算资源浪费。v-once指令通过标记元素为"一次性渲染"，可跳过后续更新的虚拟DOM处理流程。当应用于复杂静态结构（如大型页脚）时，能有效减少渲染开销，提升页面响应速度。该优化尤其适用于内容庞大且永远不变的组件部分。
2025-11-21 07:00:00
196
原创 Vue 3 的v-pre指令：讲解v-pre跳过编译的作用
本文介绍了Vue 3中的v-pre指令，阐述了其核心作用、使用场景及工作原理。v-pre可以跳过指定元素及其子元素的编译过程，直接输出原始HTML内容，适用于展示Vue语法示例或优化静态内容性能。文章详细解析了v-pre在Vue编译流程中的处理机制，包括源码层面的实现逻辑，并提供了基础语法示例。此外还对比了v-pre与其他指令的优先级关系，说明当其与其他指令同时使用时，v-pre会优先生效。该指令既能确保原始内容正确展示，又能提升应用编译性能。
2025-11-21 07:00:00
449
原创 Vue 3 的watch vs watchEffect：比较watch和watchEffect的区别
Vue 3响应式系统中，watch和watchEffect是两种核心监听方式。watch需要显式指定监听源，提供精确控制，适合需要获取新旧值或条件触发场景。watchEffect自动追踪依赖，立即执行回调，适合依赖关系复杂或需要即时反应的场景。两者都支持异步操作和副作用清理，但watchEffect更简洁，而watch配置更灵活（如immediate、deep选项）。开发中应根据需求选择：精确监听用watch，自动追踪用watchEffect，两者共同构建Vue 3强大的响应式能力。
2025-11-20 07:00:00
697
原创 Vue 3 的nextTick函数：讲解nextTick的作用及使用场景
本文深入解析Vue的nextTick机制，揭示其异步更新DOM的核心原理。主要内容包括： nextTick基础概念：Vue采用异步更新策略，nextTick用于在DOM更新后执行回调 异步更新队列机制：Vue将数据变更缓冲在队列中，通过微任务批量执行DOM更新 实现原理剖析：nextTick利用Promise/MutationObserver等API实现微任务调度 应用场景：获取更新后DOM、第三方库集成、组件通信等典型用例 注意事项：避免过度使用、理解执行时机、处理异步操作等最佳实践 不同版本实现差异：对
2025-11-20 07:00:00
902
原创 Vue 3 的shallowReactive和shallowRef：介绍浅响应式API的使用场景
本文深入探讨Vue3的响应式系统，重点分析shallowReactive和shallowRef的应用场景。首先通过智能记账本的比喻解释响应式原理，说明Vue3基于Proxy实现数据拦截和依赖收集。文章指出reactive和ref默认的深层响应式机制会递归转换整个对象，虽然使用方便但存在性能瓶颈，特别是处理大型嵌套数据结构时会导致明显的初始化延迟。通过一个组织架构图的示例，展示了深层响应式在处理上万条数据时的性能问题，为引入浅层响应式API做好铺垫，强调它们是优化大型数据集性能的解决方案。
2025-11-19 07:00:00
764
原创 Vue 3 的readonly和shallowReadonly：讲解如何创建只读的响应式对象
本文介绍了 Vue 3 中的 readonly 和 shallowReadonly API，重点探讨了它们在数据保护中的重要作用。readonly 提供深度递归的只读保护，通过代理对象拦截所有写入操作，确保数据不可修改。文章从设计哲学出发，解释了为什么前端开发需要只读机制，包括增强数据流可预测性、防止意外副作用等。具体展示了 readonly 的基本用法和实现原理，说明了它是通过 Proxy 实现的递归代理机制。摘要概括了 readonly 的核心功能和价值，适合读者快速了解这一特性。
2025-11-19 07:00:00
1121
原创 Vue 3 的插件系统：介绍如何编写和使用Vue插件
我们先来看看 Vue 官方是怎么说的。官方文档定义插件（Plugin）为：“插件是自包含的代码，通常用来为 Vue 添加全局级功能。嗯，很准确，但有点“冷冰冰”。怎么理解呢？打个比方吧。想象一下，你买了一台非常棒的裸机电脑（这就是 Vue 的核心框架），它性能强劲，但啥也干不了。你想上网，于是你安装了一个浏览器插件；你想看视频，又安装了一个解码器插件；你想保护电脑安全，还得装个杀毒软件插件。Vue 插件就扮演着类似的角色。
2025-11-18 07:00:00
916
原创 Vue 3 的响应式工具函数（isRef, unref等）：讲解isRef、unref等工具函数的作用
本文深入探讨了Vue 3响应式系统中的核心工具ref和reactive。ref是为基本数据类型设计的响应式"保险箱"，通过.value属性访问数据；reactive是为复杂对象打造的响应式"魔法玻璃罩"，使用Proxy实现深度响应。文章对比了两者的核心区别：ref需要.value访问但支持基本类型替换，而reactive直接访问属性但不能替换整个对象。通过代码示例和通俗比喻，帮助开发者理解响应式基础，为后续学习响应式工具函数奠定基础。
2025-11-18 07:00:00
812
原创 Vue 3 的watchEffect函数：介绍watchEffect的基本用法和特点
本文介绍了Vue3中的watchEffect API，它是响应式编程的重要工具。watchEffect能自动追踪依赖并执行副作用，相比watch更加简洁高效。文章详细讲解了其核心特点、基本用法（包括监听ref和reactive数据）以及配置选项（如控制执行时机的flush选项）。watchEffect适用于依赖关系复杂的场景，能显著简化代码并提升开发效率。
2025-11-17 11:02:22
1075
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人