vue較深刻的知識點

1 理解何爲虛擬節點前端

虛擬dom是什麼?
虛擬dom就是經過js對象來模擬描述dom樹,包括tag,attr, children等屬性來表明標籤名,屬性,子元素等。因爲不須要有操做dom的方法,因此比真實的dom輕量不少。 vue虛擬dom是依賴於一個開源庫snabbdom.js來擴展實現的。 ,映射到真實的 DOM 實際上要經歷 VNode 的 create、diff、patch 等過程。

爲何vue要使用虛擬dom?
1.直接頻繁的操做真實的dom引發瀏覽器重排重繪,性能很差。虛擬dom能夠經過diff算法快速的計算出變更的地方,有針對性的修改真實的dom。
2.實現數據映射到視圖 3.虛擬dom是js對象描述的,能夠跨平臺應用,而真實的dom只能在瀏覽器被識別。
 

 2 vue的數據驅動vue

Vue.js 一個核心思想是數據驅動。所謂數據驅動,是指視圖是由數據驅動生成的,咱們對視圖的修改,不會直接操做 DOM,而是經過修改數據。它 相比咱們傳統的前端開發,如使用 jQuery 等前端庫直接修改 DOM,大大簡化了代碼量。
特別是當交互複雜的時候,只關心數據的修改會讓代碼的邏輯變的很是清晰,由於 DOM 變成了數據的映射,咱們全部的邏輯都是對數據的修改,而不用碰觸 DOM,這樣的代碼很是利於維護。

 

3 vue的數據渲染到視圖的過程node

compile將template模板render爲vnode,經過patch生成爲真實的dom

 

4 說說vue的生命週期git

每一個 Vue 實例在被建立以前都要通過一系列的初始化過程。例如須要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。
同時在這個過程當中也會運行一些叫作生命週期鉤子的函數,給予用戶機會在一些特定的場景下添加他們本身的代碼。 beforeCread鉤子是在vue初始化數據以前調用的,此時取不到props data等值 created 鉤子是在vue初始化數據和監聽函數以後調用的,此時能拿到props data等值。 beforeMount 是在render渲染vvnode以前調用的,此時未掛載到$el上。 mounted 是在渲染完vnode,獲得真實dom並掛載到$el身上後調用的,此時能拿到真實的dom beforeUpdate 是實例的數據發生變化,未渲染到頁面以前調用的。 updated是數據發生變化並完成視圖更新後調用的 beforeDestroy 組件銷燬以前調用 destroyed 組件銷燬以後調用的,此時已經註銷掉全部監聽事件和數據,可是頁面的真實dom依舊保留着。

 5 深刻vue的響應式原理github

響應式對象,核心就是利用 Object.defineProperty 給數據添加了 getter 和 setter。 目的就是爲了在咱們訪問數據以及寫數據的時候能自動執行一些邏輯:getter 作的事情是依賴收集,setter 作的事情是派發更新。

 6 說說nextTick算法

vue的據的變化到 DOM 的從新渲染是一個異步過程,發生在下一個 tick。因此一旦咱們想要獲取到數據變化後的dom,須要在vm.$nextTick()以後去獲取

7 computed 和watch 有什麼區別瀏覽器

計算屬性本質上是 computed 加 watcher,而偵聽屬性本質上是 user watcher。 就應用場景而言,計算屬性適合用在模板渲染中,某個值是依賴了其它的響應式對象甚至是計算屬性計算而來;而偵聽屬性適用於觀測某個值的變化去完成一段複雜的業務邏輯。
相關文章
相關標籤/搜索