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

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

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

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

 

一、vue-loader作了什麼？

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

 

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

 

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

 

render function code 
是從模板編譯而來（能夠而且應該預編譯）的組件核心渲染方法，
在每一次組件的 Render 過程當中，
經過注入的數據執行可生成虛擬 Dom

 

 

---

 

 

二、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