vue的.vue文件是怎么run起來(lái)的(vue-loader)
引子：vue的.vue文件是怎么跑起來(lái)的？
答：通過(guò)vue-loader，解析.vue文件，在webpack解析，拆解vue組件
1、vue-loader做了什么？
vue-loader是一個(gè)webpack加載器，這是vue組件的格式：
<template> ... </template> <script> ... </script> <style> ... </style>
它可以把這樣的vue組件轉(zhuǎn)化為JS模塊，這其中最值得關(guān)注的是，它生成了 render function code
render function code
是從模板編譯而來(lái)（可以并且應(yīng)該預(yù)編譯）的組件核心渲染方法，
在每一次組件的 Render 過(guò)程中，
通過(guò)注入的數(shù)據(jù)執(zhí)行可生成虛擬 Dom
2、vue核心執(zhí)行過(guò)程
vue核心的執(zhí)行過(guò)程主要分為這幾個(gè)階段：
1） 編譯模板，
生成可復(fù)用的render function code，
這一步在vue實(shí)例的整個(gè)生命周期中只會(huì)執(zhí)行一次甚至零次，
因?yàn)槲覀兛梢栽诖虬臅r(shí)候可以預(yù)編譯
2） 生成watcher等核心渲染監(jiān)聽(tīng)，
在整個(gè)vue實(shí)例的生命過(guò)程中持續(xù)發(fā)生著作用，
對(duì)view和modal進(jìn)行雙向綁定
3） 虛擬dom的diff比較，
當(dāng)watcher監(jiān)聽(tīng)到data的變更的時(shí)候，
就會(huì)根據(jù)注入新的data執(zhí)行render function code，
生成新的虛擬dom，
跟老的虛擬dom（第一次執(zhí)行的時(shí)候可能為空）進(jìn)行diff比對(duì)，
不同的部分將寫(xiě)入真實(shí)的dom
總結(jié)
以上所述是小編給大家介紹的vue的.vue文件是怎么run起來(lái)的(vue-loader) ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 詳解vue-loader在項(xiàng)目中是如何配置的
- vue2.0安裝style/css loader的方法
- Vue2.0結(jié)合webuploader實(shí)現(xiàn)文件分片上傳功能
- Vue的移動(dòng)端多圖上傳插件vue-easy-uploader的示例代碼
- vue webuploader 文件上傳組件開(kāi)發(fā)
- Vue上傳組件vue Simple Uploader的用法示例
- 深入理解vue-loader如何使用
- Vue + Webpack + Vue-loader學(xué)習(xí)教程之相關(guān)配置篇
- Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
相關(guān)文章
Vue監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)錨點(diǎn)定位(雙向)示例
今天小編大家分享一篇Vue監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)錨點(diǎn)定位(雙向)示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
本篇文章主要介紹了vue-axios使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Element Plus實(shí)現(xiàn)Affix 固釘
本文主要介紹了Element Plus實(shí)現(xiàn)Affix 固釘，Affix組件用于將頁(yè)面元素固定在特定可視區(qū)域，文中通過(guò)示例代碼介紹的非常詳細(xì)，感興趣的小伙伴們可以參考一下2021-07-07
詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了在vue路由上添加公共的路由前綴方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
關(guān)于Vue在ie10下空白頁(yè)的debug小結(jié)
這篇文章主要給大家介紹了關(guān)于Vue在ie10下空白頁(yè)的debug相關(guān)資料，這是最近在工作中遇到的一個(gè)問(wèn)題，通過(guò)查找相關(guān)的資料終于解決了，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
Element-ui DatePicker顯示周數(shù)的方法示例
這篇文章主要介紹了Element-ui DatePicker顯示周數(shù)的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue2.0中click點(diǎn)擊當(dāng)前l(fā)i實(shí)現(xiàn)動(dòng)態(tài)切換class
本篇文章主要介紹了vue2.0中click點(diǎn)擊當(dāng)前l(fā)i實(shí)現(xiàn)動(dòng)態(tài)切換class ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue-cli項(xiàng)目?jī)?yōu)化方法- 縮短首屏加載時(shí)間
這篇文章主要介紹了vue-cli項(xiàng)目?jī)?yōu)化 縮短首屏加載時(shí)間,需要的朋友可以參考下2018-04-04
vue實(shí)現(xiàn)數(shù)字滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06