用JavaScript 對象結構表示 DOM 樹的結構;而後用這個樹構建一個真正的 DOM 樹,插到文檔當中 當狀態變動的時候,從新構造一棵新的對象樹。而後用新的樹和舊的樹進行比較,記錄兩棵樹差別 把所記錄的差別應用到所構建的真正的DOM樹上,視圖就更新了。Virtual DOM 本質上就是在 JS 和 DOM 之間作了一個緩存。html
Vue實例有一個完整的生命週期,也就是從開始建立、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、銷燬等一系列過程,咱們稱這是Vue的生命週期。通俗說就是Vue實例從建立到銷燬的過程,就是生命週期。vue
每個組件或者實例都會經歷一個完整的生命週期,總共分爲三個階段:初始化、運行中、銷燬。git
實例、組件經過new Vue() 建立出來以後會初始化事件和生命週期,而後就會執行beforeCreate鉤子函數,這個時候,數據尚未掛載呢,只是一個空殼,沒法訪問到數據和真實的dom,通常不作操做github
掛載數據,綁定事件等等,而後執行created函數,這個時候已經可使用到數據,也能夠更改數據,在這裏更改數據不會觸發updated函數,在這裏能夠在渲染前倒數第二次更改數據的機會,不會觸發其餘的鉤子函數,通常能夠在這裏作初始數據的獲取算法
接下來開始找實例或者組件對應的模板,編譯模板爲虛擬dom放入到render函數中準備渲染,而後執行beforeMount鉤子函數,在這個函數中虛擬dom已經建立完成,立刻就要渲染,在這裏也能夠更改數據,不會觸發updated,在這裏能夠在渲染前最後一次更改數據的機會,不會觸發其餘的鉤子函數,通常能夠在這裏作初始數據的獲取vuex
接下來開始render,渲染出真實dom,而後執行mounted鉤子函數,此時,組件已經出如今頁面中,數據、真實dom都已經處理好了,事件都已經掛載好了,能夠在這裏操做真實dom等事情...數組
當組件或實例的數據更改以後,會當即執行beforeUpdate,而後vue的虛擬dom機制會從新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比以後從新渲染,通常不作什麼事兒緩存
當更新完成後,執行updated,數據已經更改完成,dom也從新render完成,能夠操做更新後的虛擬domdom
當通過某種途徑調用$destroy方法後,當即執行beforeDestroy,通常在這裏作一些善後工做,例如清除計時器、清除非指令綁定的事件等等函數
組件的數據綁定、監聽...去掉後只剩下dom空殼,這個時候,執行destroyed,在這裏作善後工做也能夠
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/234
緣由很簡單,一個父組件下不僅有你一個子組件。 一樣,使用這份 prop 數據的也不僅有你一個子組件。 若是每一個子組件都能修改 prop 的話,將會致使修改數據的源頭不止一處。
因此咱們須要將修改數據的源頭統一爲父組件,子組件像要改 prop 只能委託父組件幫它。從而保證數據修改源惟一
https://muyiy.cn/question/frame/40.html
https://muyiy.cn/question/tool/70.html
https://muyiy.cn/question/frame/51.html
https://muyiy.cn/question/frame/78.html
https://muyiy.cn/question/frame/118.html
https://muyiy.cn/question/frame/119.html