Vite Vue 学习记录

在 Vue 3 中，对模板的编译和渲染做了大量的优化，在编译阶段通过 动态节点收集和静态节点提升，为渲染阶段的性能提升打下了坚实的基础

从 Vue 3 在 2020 年 9 月发布到现在，也已经两年半的时间了，期间经过大大小小的优化和迭代，目前 Vue 3 已经快成为 Vue 新项目的首选版本，Vue 2 也即将停止维护，所以现在写

Vue 2 的 diff 算法相对于简单 diff 算法来说，通过 双端对比与生成索引 map 两种方式 减少了简单算法中的多次循环操作，新旧数组均只需要进行一次遍历即可将所有节点进行对比。

之前关注 川佬（若川） 的源码共读活动已经很久了，只是一直没有没有静下心来跟着川佬一起学习，直到今年年初才加入了川佬的源码共读交流群。对于如何学习源码也是一头雾水，所以

在之前的 Vue2与Vue3响应式原理与依赖收集详解 和 通过一个例子解析 Vue 3 Watch 的工作原理 中，已经大致讲述了 Vue 3 中对 对象 的响应式处理方

之前在一个大佬的粉丝群里看到了这样一个问题，具体代码如下： 疑问就是为什么有些情况下会不生效？ watch 函数定义 首先我们看一下官方对 watch 函数参数与返

结合前面两篇文章中的内容，我们分析了 Vue 3 响应式系统的 基础实现部分，包括 操作拦截 与 依赖收集，并且也分析了依赖收集过程中 Effect 副作用嵌套和循

在之前的 Vue2与Vue3响应式原理与依赖收集详解 一文中，我们讲述了 Vue 2 与 Vue 3 在实现数据响应式处理的设计思路与他们的不同之处，也分析了 Vu

继 Angular 和 React 之后，尤大在 2016 年发布了如今“前端三剑客”之一的 Vue 2.0，并凭借其简单易用、轻量高效的特点受到了广泛的欢迎，特别

Pinia 与 Vuex 一样，是作为 Vue 的“状态存储库”，用来实现 跨页面/组件 形式的数据状态共享。在平时的开发过程中，Vue 组件之间可以通过 Props 和 Events

很早之前笔者写过一篇 vue 2 引入和初始化高德地图的文章 [Vue项目中使用高德地图]，介绍了三种常见的高德

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第n篇文章，点击查看活动详情 响应式系统（四） 关于 Vue 2 响应式系统的前三节已经讲述了 “数据劫持 Observer” 与 “依赖收集分发

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第n篇文章，点击查看活动详情 响应式系统（三） 上一节 响应式系统（二） 中大致说明了 Observer 与 observe 通过 Object.

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情 响应式系统（二） 在上一节 响应式系统（一） 中，对 Vue 的数据响应式处理做了一点点介绍。整个数据的

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情 响应式系统（一） 在 Vue 2 的官方文档 - 深入响应式原理 中介绍了 Vue 最独特的特性就是 非

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情 Provide/Inject 初始化 1. initInjections 依赖初始化 该步骤其实发生在

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情 initState 状态初始化 在配置标准化合并以及声明周期初始化完成之后，会调用 callHook('

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情 initRender 组件渲染初始化 在 initEvents 事件系统初始化完成之后，紧接着的就是组件

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情 initEvents 组件事件初始化 在 initLifecycle 初始化生命周期执行结束后，紧接着就

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情 new Vue() 发生了什么 不管是在脚手架创建的 Vue 单页应用里面，还是通过 CDN 等方式直接