vue的.vue文件是怎麼run起來的(vue-loader)

引子:vue的.vue文件是怎麼跑起來的?

答:通過vue-loader,解析.vue文件,在webpack解析,拆解vue組件

1、vue-loader做了什麼?

vue-loader是一個webpack加載器,這是vue組件的格式:

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

它可以把這樣的vue組件轉化爲JS模塊,這其中最值得關注的是,它生成了 render function code

render function code
是從模板編譯而來(可以並且應該預編譯)的組件核心渲染方法,
在每一次組件的 Render 過程中,
通過注入的數據執行可生成虛擬 Dom

2、vue核心執行過程

vue核心的執行過程主要分爲這幾個階段:
1) 編譯模板,
生成可複用的render function code,
這一步在vue實例的整個生命週期中只會執行一次甚至零次,
因爲我們可以在打包的時候可以預編譯
2) 生成watcher等核心渲染監聽,
在整個vue實例的生命過程中持續發生着作用,
對view和modal進行雙向綁定
3) 虛擬dom的diff比較,
當watcher監聽到data的變更的時候,
就會根據注入新的data執行render function code,
生成新的虛擬dom,
跟老的虛擬dom(第一次執行的時候可能爲空)進行diff比對,
不同的部分將寫入真實的dom

最後

爲了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成爲全棧工程師,乃至架構師的路上披荊斬棘。在這裏給大家推薦一個前端全棧學習交流圈:866109386.歡迎大家進羣交流討論,學習交流,共同進步。

當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程序員們,祝福大家在往後的工作與面試中一切順利。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章