vue的.vue檔案是怎麼run起來的(vue-loader)

摘要： vue的.vue檔案是怎麼run起來的(vue-loader) 引子：vue的.vue檔案是怎麼跑起來的？ 答：通過vue-loader，解析.vue檔案，在webpack解析，拆解vue元件 1、vue-loader做了什麼？ vue-loader是一個webpack載入器，...

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