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


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM