你對vue框架的理解？

Vue.js是一個流行的JavaScript框架，它使得構建復雜的交互式應用程序變得更容易。Vue.js基于MVVM模式設計，采用了響應式數據綁定和組件化的架構。在Vue.js中，數據綁定是非常重要的概念，它通過使用觀察者模式來追蹤數據變化并自動更新DOM。

Vue.js源碼是一個龐大而復雜的項目，但通過掌握其核心概念，我們可以更好地理解其工作原理。在本文中，我們討論了Vue.js的響應式數據綁定、虛擬DOM、模板編譯、組件、生命周期鉤子、事件處理和指令等關鍵知識點。了解這些知識點可以讓我們更好地編寫Vue.js應用程序，并深入了解Vue.js的工作原理

【資料圖】

計算屬性和偵聽器

Vue.js提供了計算屬性和偵聽器來處理數據的變化。計算屬性是用于計算和緩存的屬性，而偵聽器則允許你監聽數據的變化并執行特定的操作。這兩個概念都是基于Vue.js的響應式數據綁定實現的。

計算屬性的實現是通過使用Object.defineProperty()方法來定義getter和setter方法。當計算屬性依賴的數據發生變化時，計算屬性會重新計算，這樣可以避免重復計算。偵聽器則是通過使用Watcher對象來實現的。

Vue.js中的虛擬DOM

Virtual DOM是Vue.js的一個核心概念，它是一個“輕量級”的DOM副本，作為內存中的JavaScript對象存在。每次數據發生變化時，Vue.js會計算需要更新的最小DOM子樹，然后只更新這些部分。這種方法比直接操作真實DOM要快得多。

在Vue.js中，虛擬DOM由VNode類來表示。VNode類有一些屬性：tag、data、children等。VNode實例通常通過createElement()方法創建，該方法返回一個VNode實例。

模板編譯

Vue.js使用模板來描述應用程序的界面，而模板編譯是將模板轉換為渲染函數的過程。在Vue.js中，模板編譯是由template編譯器來處理的。它將模板解析為AST（抽象語法樹），然后將AST轉換為渲染函數。

Vue.js的模板編譯器是獨立的，可以在瀏覽器中運行。在開發環境中，模板編譯器會被自動加載，并且Vue.js還提供了一個單獨的運行時構建，不包含模板編譯器。這意味著你需要在構建工具中對模板進行預編譯，或者使用手動渲染函數。

組件

組件是Vue.js的另一個核心概念，它允許你構建可重用和可組合的UI組件。在Vue.js中，每個組件都是一個Vue實例，并且可以包含其他組件。組件可以接收屬性（props）和發射事件，以便與其他組件進行通信。

Vue.js中的組件是通過Vue.extend()方法來創建的。該方法將基本Vue類與組件定義合并，并返回一個新的構造函數。然后可以在應用程序中使用自定義標記（例如）來創建組件實例。

生命周期鉤子

Vue.js的生命周期鉤子是一系列函數，它們定義了Vue實例在不同階段執行的操作。這些階段包括：創建、掛載、更新和銷毀。生命周期鉤子可以在Vue實例的選項對象中定義。

在Vue.js中有7個生命周期鉤子：

created: 在Vue實例創建后調用，但在模板渲染之前。

mounted: 在Vue實例掛載到DOM上后調用。

updated: 在Vue實例數據被更新后調用，但在DOM重新渲染之前。

destroyed: 在Vue實例銷毀之前調用。

beforeCreate: 在Vue實例創建之前調用。

beforeMount: 在Vue實例掛載到DOM之前調用。

beforeUpdate: 在Vue實例數據更新之前調用，但在DOM重新渲染之前。

Vue.js中的事件處理

在Vue.js中，你可以使用v-on指令來綁定DOM事件。例如，你可以使用v-on:click來監聽點擊事件。事件處理程序可以是內聯函數，也可以是Vue.js組件的方法。事件處理程序可以接收一個事件對象作為參數。

在Vue.js的事件處理中，事件是經過封裝的。在組件內部使用$emit方法觸發事件，在組件之間使用$on來監聽事件。這樣可以避免直接操作dom元素，使代碼更加清晰和易于維護。

Vue.js中的指令

Vue.js中的指令是特殊的HTML屬性，它們可以用于指定某些特殊行為。例如，v-if和v-for指令用于條件渲染和循環渲染。指令可以接收表達式作為參數，并可以在表達式變化時進行更新。

Vue.js提供了一些內置指令，包括v-model、v-bind、v-on等。我們可以自定義指令來擴展Vue.js的功能。自定義指令需要使用Vue.directive()方法來定義。

簡述MVVM

MVVM是Model-View-ViewModel縮寫，也就是把MVC中的Controller演變成ViewModel。Model層代表數據模型，View代表UI組件，ViewModel是View和Model層的橋梁，數據會綁定到viewModel層并自動將數據渲染到頁面中，視圖變化的時候會通知viewModel層更新數據。

v-for中key的作用

key的作用主要是為了更高效的對比虛擬DOM中每個節點是否是相同節點;Vue在patch過程中判斷兩個節點是否是相同節點,key是一個必要條件，渲染一組列表時，key往往是唯一標識，所以如果不定義key的話，Vue只能認為比較的兩個節點是同一個，哪怕它們實際上不是，這導致了頻繁更新元素，使得整個patch過程比較低效，影響性能;從源碼中可以知道，Vue判斷兩個節點是否相同時主要判斷兩者的key和元素類型等，因此如果不設置key,它的值就是undefined，則可能永 遠認為這是兩個相同的節點，只能去做更新操作，這造成了大量的dom更新操作，明顯是不可取的。

vue組件的通信方式

父子組件通信

父->子props，子->父 $on、$emit獲取父子組件實例 parent、parent、children Ref 獲取實例的方式調用組件的屬性或者方法 Provide、inject官方不推薦使用，但是寫組件庫時很常用

兄弟組件通信

Event Bus 實現跨組件通信 Vue.prototype.$bus = new Vue() Vuex

跨級組件通信

$attrs、$listeners Provide、inject

路由傳參

使用router-link進行路由導航，傳遞參數直接調用$router.push 實現攜帶參數的跳轉通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數使用path來匹配路由，然后通過query來傳遞參數，這種情況下 query傳遞的參數會顯示在url

路由的兩種模式 hash與history

對于Vue 這類漸進式前端開發框架，為了構建SPA(單頁面應用)，需要引入前端路由系統，這也就是Vue-router存在的意義。前端路由的核心，就在于改變視圖的同時不會向后端發出請求。

1、hash ——即地址欄URL中的#符號，它的特點在于：hash 雖然出現URL中，但不會被包含在HTTP請求中，對后端完全沒有影響，因此改變hash不會重新加載頁面。

2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。這兩個方法應用于瀏覽器的歷史記錄站，在當前已有的back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改是，雖然改變了當前的URL，但你瀏覽器不會立即向后端發送請求。history模式，會出現404 的情況，需要后臺配置。

雙向綁定實現原理

當一個Vue實例創建時，Vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉為 getter/setter并且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher重新計算，從而致使它關聯的組件得以更新。

v-model的實現以及它的實現原理嗎？

vue中雙向綁定是一個指令v-model，可以綁定一個動態值到視圖，同時視圖中變化能改變該值。v-model是語法糖，默認情況下相于:value和@input。使用v-model可以減少大量繁瑣的事件處理代碼，提高開發效率，代碼可讀性也更好通常在表單項上使用v-model原生的表單項可以直接使用v-model，自定義組件上如果要使用它需要在組件內綁定value并處理輸入事件我做過測試，輸出包含v-model模板的組件渲染函數，發現它會被轉換為value屬性的綁定以及一個事件監聽，事件回調函數中會做相應變量更新操作，這說明神奇魔法實際上是vue的編譯器完成的。

new Vue后整個的流程

initProxy：作用域代理，攔截組件內訪問其它組件的數據。

initLifecycle：建立父子組件關系，在當前組件實例上添加一些屬性和生命周期標識。如Math Processing Errorparent,parent,refs,$children,_isMounted等。

initEvents：對父組件傳入的事件添加監聽，事件是誰創建誰監聽，子組件創建事件子組件監聽

initRender：聲明Math Processing Errorslots和slots和createElement()等。

initInjections：注入數據，初始化inject，一般用于組件更深層次之間的通信。

initState：重要)數據響應式：初始化狀態。很多選項初始化的匯總：data,methods,props,computed和watch。

initProvide：提供數據注入。

思考：為什么先注入再提供呢？？

1、首先來自祖輩的數據要和當前實例的data,等判重，相結合，所以注入數據的initInjections一定要在InitState的上面。

從上面注入進來的東西在當前組件中轉了一下又提供給后代了，所以注入數據也一定要在上面。

keep-alive的實現

keep-alive是Vue的內置組件，實現組件緩存。當它包裹動態組件時，會緩存不活動的組件實例，而不是銷毀。

keep-alive是系統自帶的一個組件，用來緩存組件，避免多次加載相同的組件，減少性能消耗，提高用戶體驗。

例如我們可以在列表頁進入詳情頁使用。如果在列表頁點擊的都是相同的 ，詳情頁就不用請求多次了，直接緩存起來就行了，如果點擊的不同，則需要重新請求數據

vuex、vue-router實現原理

vuex是一個專門為vue.js應用程序開發的狀態管理庫。 核心概念：

state(單一狀態樹) getter/Mutation顯示提交更改state

Action類似Mutation，提交Mutation，可以包含任意異步操作。

module(當應用變得龐大復雜，拆分store為具體的module模塊)

你怎么理解Vue中的diff算法?

在js中,渲染真實DOM的開銷是非常大的, 比如我們修改了某個數據,如果直接渲染到真實DOM, 會引起整個dom樹的重繪和重排。那么有沒有可能實現只更新我們修改的那一小塊dom而不要更新整個dom呢？此時我們就需要先根據真實dom生成虛擬dom， 當虛擬dom某個節點的數據改變后會生成有一個新的Vnode, 然后新的Vnode和舊的Vnode作比較，發現有不一樣的地方就直接修改在真實DOM上，然后使舊的Vnode的值為新的Vnode。

diff的過程就是調用patch函數，比較新舊節點，一邊比較一邊給真實的DOM打補丁。在采取diff算法比較新舊節點的時候，比較只會在同層級進行。 在patch方法中，首先進行樹級別的比較 new Vnode不存在就刪除 old Vnodeold Vnode 不存在就增加新的Vnode 都存在就執行diff更新 當確定需要執行diff算法時，比較兩個Vnode，包括三種類型操作：屬性更新，文本更新，子節點更新 新老節點均有子節點，則對子節點進行diff操作，調用updatechidren 如果老節點沒有子節點而新節點有子節點，先清空老節點的文本內容，然后為其新增子節點 如果新節點沒有子節點，而老節點有子節點的時候，則移除該節點的所有子節點 老新老節點都沒有子節點的時候，進行文本的替換

updateChildren 將Vnode的子節點Vch和oldVnode的子節點oldCh提取出來。 oldCh和vCh各有兩個頭尾的變量StartIdx和EndIdx，它們的2個變量相互比較，一共有4種比較方式。如果4種比較都沒匹配，如果設置了key，就會用key進行比較，在比較的過程中，變量會往中間靠，一旦StartIdx>EndIdx表明oldCh和vCh至少有一個已經遍歷完了，就會結束比較。

關鍵詞：