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組件轉(zhuǎn)化為JS模塊，這其中最值得關(guān)注的是，它生成了 render function code
render function code
是從模板編譯而來（可以并且應(yīng)該預(yù)編譯）的組件核心渲染方法，
在每一次組件的 Render 過程中，
通過注入的數(shù)據(jù)執(zhí)行可生成虛擬 Dom
2、vue核心執(zhí)行過程
vue核心的執(zhí)行過程主要分為這幾個階段：
1） 編譯模板，
生成可復(fù)用的render function code，
這一步在vue實例的整個生命周期中只會執(zhí)行一次甚至零次，
因為我們可以在打包的時候可以預(yù)編譯
2） 生成watcher等核心渲染監(jiān)聽，
在整個vue實例的生命過程中持續(xù)發(fā)生著作用，
對view和modal進(jìn)行雙向綁定
3） 虛擬dom的diff比較，
當(dāng)watcher監(jiān)聽到data的變更的時候，
就會根據(jù)注入新的data執(zhí)行render function code，
生成新的虛擬dom，
跟老的虛擬dom（第一次執(zhí)行的時候可能為空）進(jìn)行diff比對，
不同的部分將寫入真實的dom
總結(jié)
以上所述是小編給大家介紹的vue的.vue文件是怎么run起來的(vue-loader) ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了在?Vue?中控制表單輸入方法詳解的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)簡單的計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
vue 雙向數(shù)據(jù)綁定的實現(xiàn)學(xué)習(xí)之監(jiān)聽器的實現(xiàn)方法
這篇文章主要介紹了vue 雙向數(shù)據(jù)綁定的實現(xiàn)學(xué)習(xí)之監(jiān)聽器的實現(xiàn)方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue路由傳參頁面刷新參數(shù)丟失問題解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
vue+element項目實時監(jiān)聽div寬度的變化
這篇文章主要介紹了vue+element項目里實時監(jiān)聽某個div寬度的變化,然后執(zhí)行相應(yīng)的事件,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-08-08
vue3中調(diào)用api接口實現(xiàn)數(shù)據(jù)的渲染以及詳情方式
這篇文章主要介紹了vue3中調(diào)用api接口實現(xiàn)數(shù)據(jù)的渲染以及詳情方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
使用elementUI table展開行內(nèi)嵌套table問題
這篇文章主要介紹了使用elementUI table展開行內(nèi)嵌套table問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue+express 構(gòu)建后臺管理系統(tǒng)的示例代碼
這篇文章主要介紹了vue+express 構(gòu)建后臺管理系統(tǒng)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue部署后靜態(tài)文件加載404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
從零開始用webpack構(gòu)建一個vue3.0項目工程的實現(xiàn)
這篇文章主要介紹了從零開始用webpack構(gòu)建一個vue3.0項目工程的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09