背景
最近使用Vue2搞了搞页面配置化的东西,遇坑不多,但有些时候还是感觉对源码不熟悉,写的代码不好理解。趁着Vue3还没有正式发布,赶紧学习一波Vue2,不然使用过Vue2也就只是使用过Vue2了。平时开发重度使用的一个框架,不看一波源码,不手撸一遍源码,总感觉差点意思。之前也陆陆续续看过些,但不抄一抄代码,总是看得不明所以或者丢三落四的。
计划
- 精简需要看的代码: 因为对Vue2 整个源码目录结果,使用的语法都比较不适应,所以还是从打包出来的单文件入手,选了一个代码量最少的
vue.runtime.esm.jsgithub地址, 代码有 6377 行,加注释、空格有8000多,看起来还是累,所以精简一些无关流程的实现 - 按自己的理解,拆分代码代码,也就是重写一遍,重写过程再做适当的精简
- 写一些单测
产出
抄源码总得总结,不然过后又是白费了许多力气而已。 总结从以下角度:
- 代码组织形式:毕竟代码量也不少,学习如何组织的,后续也可以对比Vue3的组织形式
- Vue2功能点总结:双向数据绑定、响应式原理、组件化实现
- Vue2源码里面使用的一些设计模式总结
- 一些抄源码的感想体会
计划
- 简单文本渲染
- 简单文本响应式渲染
- 组件渲染
- 生命周期钩子函数实现
- DOM属性渲染:class/style
- DOM事件绑定
- prop 属性实现
- 事件机制实现
- 列表渲染
- 指令:v-model/v-show