>[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)