Why Vuex Has Mutations AND Actions
摘要： 📌 三、总结：为什么这么设计？ Devtools 的硬约束： 强制同步 Mutation 是 Vuex 实现可靠的状态快照记录和时间旅行调试的基石。 没有了它，复杂应用的调试将极其困难。 架构清晰度： Mutation 纯同步改状态，Action 管逻辑和异步。 这种明确的分工让代码结构更清晰，职责更单一，提高了可维护性和可测试性。状态的改变点（commit）集中在 Mutation，行为（dispatch）发生在 Action。 拥抱异步： Action 的异步支持是处理现代前端应用中无处不在的异步操作（尤其是 API）的必然选择。它提供了基于 Promise 的优雅编程模型。
🧬 一、核心区别（表象） | 特性 | Mutation | Action | | --- | --- | --- | | 功能 | 唯一修改状态 (state) 的途径 | 处理业务逻辑（异步、组合操作） | | 同步性 | 必须是同步操作 | 可以包含异步操作 | | 触发方式 | 通过 store.commit(mutationName, payload) | 通过 store.dispatch(actionName, payload) | | 调试 | Devtools 中可记录每次状态变更（时间旅...
30岁了，现在开始努力还算晚吗？
30 岁了， 现在开始努力，晚吗？ 这让我想起，非洲经济女学家 Dambisa Moyo 的《dead aid》书中的结束语： “The best time to plant a tree is 20 years ago. The second-best time is now.” “最好的种一棵树的时间是 20 年前，其次是现在”，启示我们不要被年龄和时间束缚，临渊羡鱼，不如退而结网，与其哀怨叹气，不如现在就开始行动起来。 网上也有段子，黄忠六十跟刘备，德川家康七十大天下，姜子牙八十为丞相，佘太君百岁挂帅，孙悟空五百多岁西天取经，白素贞一千多年下山谈恋爱，以戏谑的方式讲述了大器晚...
Vue 2（含 <2.6）如何升级兼容 Composition API 原理
本文详细说明本项目如何在 Vue 2（包括低于 2.6 的版本）上通过插件注入与运行时适配，提供与 Vue 3 Composition API 接近的开发体验。内容覆盖安装入口、启用机制、运行时上下文桥接、响应式与计算/侦听适配、插槽与生命周期、兼容策略、执行时序、常见问题与限制，以及关键代码索引。 阅读本文时，请配合 composition-api 源码食用 https://github.com/vuejs/composition-api 一、背景与总体思路 目标：在不依赖 Vue 3 内核（Proxy/Effect）的前提下，让 Vue 2 应用可以使用 `setup...
Vue3系列 - 组件通信方式
Vue3提供了多种组件间通信的方式，满足不同场景的需求。 主要的组件通信方式： Props向下传递：父组件通过props向子组件传递数据。 // 子组件定义props export function defineProps( props: PropNames[] ): Readonly 事件向上传递：子组件通过事件向父组件发送消息。 // 子组件定义emits ...
Vue3系列 - 渲染优化技术
Vue3采用了多种渲染优化技术来提高性能，这些技术主要体现在虚拟DOM的实现和响应式系统中。 主要的渲染优化技术： 虚拟DOM：Vue使用虚拟DOM来最小化实际DOM操作，只更新必要的部分。 diff算法优化：Vue3改进了diff算法，通过静态提升、事件缓存等技术减少了比对开销。 响应式系统：通过精确的依赖追踪，Vue只重新渲染依赖已更改数据的组件。 编译优化：Vue3的模板编译器能够识别静态内容，减少运行时的工作量。 异步更新队列：Vue将DOM更新操作缓存在队列中，然后一次性执行，避免不必要的计算和渲染。 ...
Vue3系列 - 自定义指令的实现
Vue3中的自定义指令允许开发者直接操作DOM元素，为框架增加了更多的灵活性。 自定义指令的核心实现： 指令钩子函数：指令定义了一系列的钩子函数，对应元素的不同生命周期。 bind：指令第一次绑定到元素时调用 inserted：被绑定元素插入父节点时调用 update：所在组件的VNode更新时调用 componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用 unbind：指令与元素解绑时调用 指令注册：可以全局注册或组件内注册。 ...
Vue3系列 - 组件生命周期的执行顺序
Vue3中组件生命周期钩子的实现位于src/v3/apiLifecycle.ts，它定义了组件从创建到销毁的各个阶段。 生命周期钩子的执行顺序： 创建阶段： onBeforeMount：组件挂载到DOM前调用 onMounted：组件挂载到DOM后调用 更新阶段： onBeforeUpdate：组件更新前调用 onUpdated：组件更新后调用 销毁阶段： onBeforeUnmount：组件卸载前调用 onUnmounted：组件卸载后调用 **特...
Vue3系列 - 响应式系统的限制
Vue3的响应式系统虽然强大，但也存在一些限制，这些限制主要体现在reactive.ts和相关文件中。 主要限制包括： 数组索引和长度变化：虽然Vue可以检测到通过索引设置数组元素的变化，但这种操作不是响应式的最佳实践。 if (DEV) { if (isArray(target)) { warn( `Avoid using Array as root value for ${ shallow ? shallowReactive() : reactive() } as it ...
Vue3系列 - 模板引用（Refs）的实现
Vue3中的模板引用（Refs）允许我们直接访问DOM元素或子组件实例，其实现主要在src/v3/reactivity/ref.ts中。 模板引用的核心实现： Ref接口：定义了具有响应式value属性的对象。 export interface Ref { value: T [RefSymbol]: true dep?: Dep [RefFlag]: true } ref函数：创建一个包装对象，使原始值变成响应式。 export function re...
Vue3系列 - 组件更新机制
Vue3的组件更新机制主要依赖于响应式系统和虚拟DOM的变更检测，核心实现涉及到effect函数和Watcher类。 组件更新的核心流程： 响应式触发：当响应式数据变化时，会触发依赖于它的所有副作用函数。 export function effect(fn: () => any, scheduler?: (cb: any) => void) { const watcher = new Watcher(currentInstance, fn, noop, { sync: true }) if (scheduler) { ...