>[success] # vue 2.x 原理简单理解 ~~~ 1.了解vue2.x ~~~ >[info] ## 准备工作 [了解vue不同版本官网篇](https://cn.vuejs.org/v2/guide/installation.html#%E6%9C%AF%E8%AF%AD) [了解vue不同版本其他博主总结篇](https://www.dazhuanlan.com/2019/10/11/5d9ff64502ede/) ~~~js 1.vue 源码的构建使用的不是webpack，这里关于具体的可以直接参考'Vue.js 技术揭秘' ~~~ >[danger] 关于vue打包前 src 文件目录说明 ~~~js ├─dist # 项目构建后的文件 ├─scripts # 与项目构建相关的脚本和配置文件 ├─flow # flow的类型声明文件 ├─src # 项目源代码 │ ├─complier # 与模板编译相关的代码 │ ├─core # 通用的、与运行平台无关的运行时代码 │ │ ├─observe # 实现变化侦测的代码 │ │ ├─vdom # 实现virtual dom的代码 │ │ ├─instance # Vue.js实例的构造函数和原型方法 │ │ ├─global-api # 全局api的代码 │ │ └─components # 内置组件的代码 │ ├─server # 与服务端渲染相关的代码 │ ├─platforms # 特定运行平台的代码，如weex │ ├─sfc # 单文件组件的解析代码 │ └─shared # 项目公用的工具代码 └─test # 项目测试代码 ~~~ >[danger] ##### 关于 Vue 实例 对应src 位置分析说明 ~~~ 1.读vue 源码首先要找到入口，也就是整个Vue 的构造函数，我们分析的是'vue.esm.js',在打包的工程 文件'.\scripts\config.js' （'与项目构建相关的脚本和配置文件'） 找到对应的入口为'src\platforms\web\entry-runtime-with-compiler.js' 2.可以发现这里的vue 是从'\src\platforms\web\runtime\index.js'引入，这里的vue是从 'vue\src\core\index.js' 这里是从'vue\src\core\instance\index.js'('Vue.js实例的构造函数和原型方法') 最后找到打包前的Vue实例声明的文件夹 3.直接看src 文件目录说明也可以发现'instance文件夹下的代码就是用来放 Vue.js实例的构造函数和原型方法' ~~~ >[danger] ##### vue 生命周期图 ~~~ 1.接下来我们分析过程会跟着这个生命周期图来逐步分解 ~~~  >[danger] ##### 参考文章 [Vue.js 技术揭秘](https://ustbhuangyi.github.io/vue-analysis/) [Vue源码系列-Vue中文社区](https://vue-js.com/learn-vue/)\ [关于虚拟dom文章](https://segmentfault.com/a/1190000020663531?utm_source=tag-newest) [vue2.0模板渲染文章](https://github.com/answershuto/learnVue/blob/master/docs/VirtualDOM%E4%B8%8Ediff(Vue%E5%AE%9E%E7%8E%B0).MarkDown) [https://github.com/aaawhz/-vue2.0](https://github.com/aaawhz/-vue2.0)