独行的风

VueUse 常用组合式函数剖析:真正值得学的是四个套路

VueUse 有 200+ 个函数,背 API 是最低效的学法。它真正复用价值在四个套路上: 参数一律接受 MaybeRefOrGetter 用 toValue 归一化、清理永远挂 effectScope、 把"策略"和"函数"解耦(useDebounceFn 就是 createFilterWrapper 套一个 debounceFilter)、 用 watchImmediate 的 cleanup 做自动解绑。文章带源码与实测数据(含卸载后待执行调用不取消的坑、 useLocalStorage 的同文档同步机制)以及 v15 的破坏性变更清单。

Vapor Mode 与 Vue 编译模式新方向:把虚拟 DOM 整个删掉

Vapor Mode 是 Vue 3.6 引入的全新编译模式:编译期直接把模板变成"一次建 DOM + 精确改 DOM"的代码, 运行时没有 VNode、也没有 diff。文章用实测编译产物对比同一模板的 VDOM 版与 Vapor 版, 讲清它省掉了什么、拿什么替代、代价是什么;并含 rc.2 那个真实 BREAKING 变更 (事件委托从默认改为显式 .delegate)、不支持特性清单与面试口述稿。

v-model 与 Transition 动画原理:两条模板语法糖的落地路径

把 v-model 和 放在一起讲,因为它们回答的是同一个问题——Vue 怎么把模板里的语法糖 落到运行时:v-model 编译成"一个 prop + 一个事件"的显式协议, 编译成一个普通组件、 靠 vnode.transition 钩子被 patch 流程回调。含各表单元素编译产物对比、修饰符实测行为、 六个过渡类名的完整时序、动画结束的判定机制与 TransitionGroup 的 FLIP 实现。

响应式 API 的边界:ref / reactive / toRefs 什么时候会断

把 Vue 响应式的边界问题收敛成一条底层规则——追踪只发生在"通过 proxy 的读写"上; 由此推出解构断链、重新赋值断链、传参断链三类失效场景的准确边界(含实测:解构出的嵌套对象 仍是响应式代理)、ref 的完整解包规则(数组/Map/浅层响应式都不解包)、模板插值为什么"看起来正常", 以及 toRef / toRefs / shallowRef / triggerRef 的正确用法。

Vue 自定义指令与 3.4+ 编译器宏(defineModel / defineOptions / v-bind 同名简写)

面试向拆解 Vue 自定义指令:为什么它是唯一"直接操作 DOM"的复用方式、七个钩子与 Vue 2 的迁移对应关系、实测的钩子调用顺序、binding 到底有哪些字段、script setup 里 v 开头的变量为什么不用注册就能当指令用,以及 3.4/3.5 的编译器宏(defineModel / defineOptions / v-bind 同名简写)实际编译成了什么。

© 独行的风. 保留部分权利。

本站采用 Jekyll 主题 Chirpy

本站总访问量 次 本站访客数 人 本文阅读量 次