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 過程中，
通過注入的數(shù)據(jù)執(zhí)行可生成虛擬 Dom
2、vue核心執(zhí)行過程
vue核心的執(zhí)行過程主要分為這幾個階段：
1） 編譯模板，
生成可復用的render function code，
這一步在vue實例的整個生命周期中只會執(zhí)行一次甚至零次，
因為我們可以在打包的時候可以預編譯
2） 生成watcher等核心渲染監(jiān)聽，
在整個vue實例的生命過程中持續(xù)發(fā)生著作用，
對view和modal進行雙向綁定
3） 虛擬dom的diff比較，
當watcher監(jiān)聽到data的變更的時候，
就會根據(jù)注入新的data執(zhí)行render function code，
生成新的虛擬dom，
跟老的虛擬dom（第一次執(zhí)行的時候可能為空）進行diff比對，
不同的部分將寫入真實的dom
總結
以上所述是小編給大家介紹的vue的.vue文件是怎么run起來的(vue-loader) ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Vue監(jiān)聽滾動實現(xiàn)錨點定位(雙向)示例
今天小編大家分享一篇Vue監(jiān)聽滾動實現(xiàn)錨點定位(雙向)示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章主要介紹了vue-axios使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹了Element Plus實現(xiàn)Affix 固釘，Affix組件用于將頁面元素固定在特定可視區(qū)域，文中通過示例代碼介紹的非常詳細，感興趣的小伙伴們可以參考一下2021-07-07
詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定，非常具有實用價值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了在vue路由上添加公共的路由前綴方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要給大家介紹了關于Vue在ie10下空白頁的debug相關資料，這是最近在工作中遇到的一個問題，通過查找相關的資料終于解決了，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-05-05
Element-ui DatePicker顯示周數(shù)的方法示例
這篇文章主要介紹了Element-ui DatePicker顯示周數(shù)的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
vue2.0中click點擊當前l(fā)i實現(xiàn)動態(tài)切換class
本篇文章主要介紹了vue2.0中click點擊當前l(fā)i實現(xiàn)動態(tài)切換class ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue-cli項目優(yōu)化 縮短首屏加載時間,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)數(shù)字滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06