Vue 框架原理相關知識點

vue生命週期原理，鉤子函數

create和mounted 的區別

在created()鉤子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操做無異於徒勞，因此此處必定要將DOM操做的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted()鉤子函數，由於該鉤子函數執行時全部的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操做都不會有問題 。

參考

• juejin.im/post/5afd7e…
• juejin.im/post/5c6d48…

MVVM框架的設計理念

爲何選擇vue

爲何使用vue，首先要看和其餘框架React/Angular的對比

React

React 的特別是使用 JSX，有些人喜歡用，有些人不喜歡？看它的語法就知道

1. 一個render函數，裏面又放html代碼，又放 JS 代碼。邏輯不能使用 if-else，只能使用一堆三元運算符。 css也能夠當成對象屬性放進去，揉在一塊，雖然最後他們會編譯成純JS，反正我我的是比較喜歡 JS/CSS/HTML 分開寫。
2. 過渡的工具依賴

ReactDOM.render(
    <div> <h1>{1+1}</h1> </div>
    ,
    document.getElementById('example')
);

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鳥教程</h1>,
    document.getElementById('example')
);

ReactDOM.render(
    <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div>
    ,
    document.getElementById('example')
);
複製代碼

Vue

特色

• 從React那裏借鑑了組件化、prop、單向數據流、性能、虛擬渲染，並意識到狀態管理的重要性。
• 從Angular那裏借鑑了模板，並賦予了更好的語法，以及雙向數據綁定（在單個組件裏）。
• 它不強制使用某種編譯器，因此你徹底能夠在遺留代碼裏使用Vue，並對以前亂糟糟的jQuery代碼進行改造。

不足

• 模板的運行時錯誤描述不夠直觀
• 年輕，社區生態不夠完善

爲何使用框架

參考

• www.zcfy.cc/article/the…
• medium.com/dailyjs/the…
• 現代 js 框架解決的主要問題是保持 UI 與狀態同步。
• 使用原生 JavaScript 編寫複雜、高效而又易於維護的 UI 界面幾乎是不可能的。
• Web components 並未提供解決同步問題的方案。
• 使用現有的虛擬 DOM 庫去搭建本身的框架並不困難。但並不建議這麼作！

雙向綁定原理，diff算法內部實現

雙向綁定原理：依賴收集、發佈訂閱

vue事件機制

從template轉換成真實DOM的實現機制

nextTick原理

官方用法：在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

原理：相似Event-loop 的異步隊列，DOM更新是異步的。當即操做data數據DOM不會當即更新，而是等同步任務執行完以後，從異步任務隊列中取出異步任務，放到執行棧中執行。

Vue 在內部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，若是執行環境不支持，則會採用 setTimeout(fn, 0) 代替。