引子：vue的.vue文件是怎么跑起來的？

答：通過vue-loader，解析.vue文件，在webpack解析，拆解vue組件

1、vue-loader做了什么？

vue-loader是一個(gè)webpack加載器，這是vue組件的格式：

<template> ... </template> <script> ... </script> <style> ... </style>

它可以把這樣的vue組件轉(zhuǎn)化為JS模塊，這其中最值得關(guān)注的是，它生成了 render function code

render function code

是從模板編譯而來（可以并且應(yīng)該預(yù)編譯）的組件核心渲染方法，

在每一次組件的 Render 過程中，

通過注入的數(shù)據(jù)執(zhí)行可生成虛擬 Dom

2、vue核心執(zhí)行過程

vue核心的執(zhí)行過程主要分為這幾個(gè)階段：

1） 編譯模板，

生成可復(fù)用的render function code，

這一步在vue實(shí)例的整個(gè)生命周期中只會(huì)執(zhí)行一次甚至零次，

因?yàn)槲覀兛梢栽诖虬臅r(shí)候可以預(yù)編譯

2） 生成watcher等核心渲染監(jiān)聽，

在整個(gè)vue實(shí)例的生命過程中持續(xù)發(fā)生著作用，

對(duì)view和modal進(jìn)行雙向綁定

3） 虛擬dom的diff比較，

當(dāng)watcher監(jiān)聽到data的變更的時(shí)候，

就會(huì)根據(jù)注入新的data執(zhí)行render function code，

生成新的虛擬dom，

跟老的虛擬dom（第一次執(zhí)行的時(shí)候可能為空）進(jìn)行diff比對(duì)，

不同的部分將寫入真實(shí)的dom

最后

以下是總結(jié)出來最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學(xué)習(xí)資料。

【領(lǐng)取方式】

關(guān)注頭條 前端全棧架構(gòu)丶第一時(shí)間獲取最新前端資訊學(xué)習(xí)

手機(jī)用戶可私信關(guān)鍵詞 【前端】即可獲取全棧工程師路線和學(xué)習(xí)資料！