vue源码学习

vue版本：2.3.0
大概的图解如下

image.png
vue源码思路：https://www.jianshu.com/p/f62e45ac0870

学习步骤一 ：看vue实现思路

原githubhttps://github.com/answershuto Vue源码解析 只要你了解一点vue，用过，就先开始读里面的markdown，目录，认真读一遍，不要太纠结细节，了解思路，读完一遍再看一遍，就会有些恍然大悟。然后再去细究里面的代码细节，设计模式等等

image.png

学习步骤二 ：认知源码中的目录结构

image.png

• compiler 目录包含vue.js所有编译相关的代码。它包括把所有模板解析成ast语法树，ast语法树优化等功能

• core目录 包含了vue.js的核心代码，包括内置组件，全局API封装，vue实例化，观察者，虚拟Dom，工具函数等等

   - observer   数据的绑定，观察者的创建添加，依赖数据的收集
   - vdom   虚拟dom的创建和patching比较替换为真实dom的代码
   - instance  vue构建初始化，事件初始化，函数设计相关的代码
   - global-api  包含给vue构造函数挂在全局（静态方法）或属性方法例如：nextTick（）  use（）
   -  component  抽象出来的通用组件：例如<keep-alive>
   -  util  工具函数例如nextTick的实现，
  

• platform vue.js是一个跨平台的MVVM框架，可以运行再web上，也可以运行再weex，native客户端上，此文件夹是vue.js的入口 2个目录代表2主要入口，分别打包成运行在web上和weex上的vue.js

• server vue.js2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下，这部分代码跑在服务端的Node.Js

• sfc parser解析 （通常我们开发vue.js都会借助webpack构建，然后通过.vue单文件来编写组件）

• shared 定义全局的钩子函数，工具方法，这里定义的都会和浏览器端和服务端的vue.js所共享

参照链接：https://www.cnblogs.com/nmxs/p/9867490.html

学习步骤三：认知vue源码中用到的知识

• Flow（javascript静态类型检查工具） https://www.jianshu.com/p/d56b2855fb3f
  flow：https://blog.csdn.net/qq_32629809/article/details/80787079
• htmlParse 解析器
• AST抽象语法树 正在学习：https://www.jianshu.com/p/9ac490dfeeb3
• 正则表达式
  -Es6模块化编程，学习rollup构建工具
• 设计模式 观察者 、适配器、等
• 学习调试技巧
  https://blog.csdn.net/Jacoh/article/details/89135214

学习步骤四：看vue.js技术揭秘需要学什么，怎么学习

https://ustbhuangyi.github.io/vue-analysis/