cmdragon's Blog Logo
cmdragon's Blog

基础入门

标签下的所有文章 61 篇文章
返回所有标签
2025-11-05 vue 基础入门 , 响应式系统 , Proxy , ref , reactive , 依赖追踪 , 组件状态管理 14 分钟阅读

Vue3响应式系统的底层原理与实践要点你真的懂吗？

Vue的响应式系统通过跟踪JavaScript状态的变化，自动更新依赖该状态的UI或逻辑。核心机制基于Proxy，解决了Vue2中Object.defineProperty的局限，支持对象新增/删除属性和数组索引/长度变化的跟踪。响应式数据通过ref和reactive创建，ref适用于基本类型和对象，需通过.value访问；reactive适用于对象/数组， …
阅读更多 cmdragon
2025-11-04 vue 基础入门 , 模板编译 , 抽象语法树 (AST) , 渲染函数 , 性能优化 , Patch Flags , 静态提升 14 分钟阅读

Vue 3模板如何通过编译三阶段实现从声明式语法到高效渲染的跨越

Vue 3的模板编译分为解析、转换和生成三个阶段，将声明式模板转换为命令式渲染函数。解析阶段将模板字符串转换为抽象语法树（AST），转换阶段优化AST并处理指令逻辑，生成阶段将AST转换为可执行的渲染函数。编译优化策略包括静态提升、Patch Flags和Tree-shaking支持，减少渲染次数和提升diff效率。实践中的优化技巧包括使用v-once缓存静 …
阅读更多 cmdragon
2025-11-03 vue 基础入门 , 模板引用 , DOM操作 , 组件通信 , nextTick , defineExpose , 最佳实践 15 分钟阅读

快速入门Vue模板引用：从收DOM“快递”到调子组件方法，你玩明白了吗？

Vue中的模板引用（Template Refs）用于在声明式编程中直接操作DOM或访问子组件实例。通过ref属性标记元素或组件，并在setup中使用同名响应式变量访问。子组件需通过defineExpose暴露内部方法或属性供父组件调用。操作DOM时，应在onMounted或nextTick中确保DOM已渲染。常见应用包括自动聚焦输入框、集成第三方库和动态获取 …
阅读更多 cmdragon
广告位
2025-11-02 vue 基础入门 , 模板表达式 , 计算属性 , JavaScript , 前端开发 , 响应式编程 , 代码优化 14 分钟阅读

快速入门Vue模板里的JS表达式有啥不能碰？计算属性为啥比方法更能打？

Vue 3模板中通过Mustache插值或指令属性嵌入JavaScript表达式，实现动态计算。模板表达式必须是单条JavaScript语句，适用于文本插值和指令属性值，但需避免副作用和流程控制语句。计算属性（computed）用于封装复杂逻辑，具备缓存性和响应性，优于methods的频繁调用。可写计算属性通过getter和setter实现双向绑定，Vue …
阅读更多 cmdragon
2025-10-31 vue 基础入门 , 条件渲染 , 列表渲染 , v-if , v-show , v-for , key属性 15 分钟阅读

快速入门Vue3：条件渲染与列表渲染的小秘密，你居然还不知道？

Vue中的条件渲染通过v-if和v-show实现，v-if根据条件销毁或重建DOM，适合不频繁切换的场景；v-show通过CSS控制显隐，适合频繁切换的场景。列表渲染使用v-for遍历数组或对象，key属性确保节点正确复用，避免使用索引作为key。v-for与v-if不应同时使用，建议通过computed属性过滤数据后再渲染。
阅读更多 cmdragon
2025-10-30 vue 基础入门 , v-on指令 , 事件处理 , 事件修饰符 , 自定义事件 , 组件通信 , DOM事件 15 分钟阅读

快速入门Vue3事件处理的挑战题：v-on、修饰符、自定义事件你能通关吗？

Vue3 中的 v-on 指令用于处理 DOM 事件，支持内联表达式和方法处理器。事件修饰符如 .stop 和 .prevent 简化了事件流控制和默认行为阻止。按键修饰符如 .enter 和系统修饰符如 .ctrl 用于处理键盘和组合键事件。自定义事件通过 $emit 实现子组件向父组件传递数据，defineEmits 可验证事件参数。常见报错包括 …
阅读更多 cmdragon
广告位