【朝花夕拾】Vue2 源码计划

206 阅读2分钟

背景

最近使用Vue2搞了搞页面配置化的东西,遇坑不多,但有些时候还是感觉对源码不熟悉,写的代码不好理解。趁着Vue3还没有正式发布,赶紧学习一波Vue2,不然使用过Vue2也就只是使用过Vue2了。平时开发重度使用的一个框架,不看一波源码,不手撸一遍源码,总感觉差点意思。之前也陆陆续续看过些,但不抄一抄代码,总是看得不明所以或者丢三落四的。

计划

  1. 精简需要看的代码: 因为对Vue2 整个源码目录结果,使用的语法都比较不适应,所以还是从打包出来的单文件入手,选了一个代码量最少的vue.runtime.esm.js github地址, 代码有 6377 行,加注释、空格有8000多,看起来还是累,所以精简一些无关流程的实现
  2. 按自己的理解,拆分代码代码,也就是重写一遍,重写过程再做适当的精简
  3. 写一些单测

产出

抄源码总得总结,不然过后又是白费了许多力气而已。 总结从以下角度:

  1. 代码组织形式:毕竟代码量也不少,学习如何组织的,后续也可以对比Vue3的组织形式
  2. Vue2功能点总结:双向数据绑定、响应式原理、组件化实现
  3. Vue2源码里面使用的一些设计模式总结
  4. 一些抄源码的感想体会

计划

  1. 简单文本渲染
  2. 简单文本响应式渲染
  3. 组件渲染
  4. 生命周期钩子函数实现
  5. DOM属性渲染:class/style
  6. DOM事件绑定
  7. prop 属性实现
  8. 事件机制实现
  9. 列表渲染
  10. 指令:v-model/v-show