vue源碼分析

雙向數據綁定

1. js的eventloop

micro 微隊列，promise的then，async await，observer， 優先級高於宏隊列。window.MutationObserver屬於observer

macro 宏隊列，setTimeout，setInterval， click，event事件，ajax，

    var MutationObserver = window.MutationObserver;
        var target = document.querySelector('#some-id');
        var observer = new MutationObserver(function(mutations){
            mutations.forEach(function(mutation){
                console.log(mutation.type);
            })
        })
        var config = {
            attributes: true
        };
        observer.observe(target, config);

setTimeout(function(){
            console.log(15);
        },0)
        document.querySelector('#some-id').setAttribute('data-test','6');
        new Promise(function(resolve){
            console.log(1);
            resolve();
            console.log(2);
        }).then(function(){
            console.log(9);
        });

        new Promise(function(resolve){
            console.log(3);
            resolve();
            console.log(4);
        }).then(function(){
            console.log(10);
        });

        function fn(){
            return new Promise((resolve,reject)=>{
                resolve(12);
            })
        }

        function fn1(){
            return new Promise((resolve,reject)=>{
                resolve(14);
            })
        }
        //async 是等待的，promise是順序執行的，而後then最後執行，相似setTimeout 0，可是要比setTimeout 0先執行
        (async function(){
            console.log(5);
            console.log(await fn()); //這裏的微隊列將後面的代碼都壓入隊列中，是這麼理解的，或者說後面是同步的了，執行完了才執行微隊列
            console.log(13);
        })();

        (async function(){
            console.log(await fn1()); //這裏等待fn執行完成，才執行下一行
        })();

        //微隊列是先進先出的，符合隊列的規則，可是若是await 後面不是promise對象的話會有區別，會將後面的語句壓入微隊列中
        (async function(){
            console.log(6);
            await console.log(7); //這裏這麼寫會有問題，打亂了微隊列的隊形，11是全部的await中的前面，其餘異步微隊列的後面
            console.log(11);
        })();

2. nextTick就是使用微隊列或是宏隊列來實現的dom元素的異步更新，那爲何顯示的內容改變了呢

這裏使用$refs獲取元素的innerHtml或value值，this.$refs是vue的一個屬性，並不直接對應dom結構，能夠理解爲虛擬dom，可是，dom的更新不是根據虛擬dom的更新來的嗎，爲何顯示變了，虛擬dom反而沒有變呢。

也就是說vue在建立的時候會生成vdom，和watcher，當有屬性變化時，對比該dom節點和虛擬dom，不一樣的話直接更新dom，而後在微隊列中更新vdom，也就是refs的值，因此直接使用是沒有的？這裏須要看下virtual dom是怎麼更新的，dom diff是怎麼比較的

 

新版本的vue的實現原理

proxy, reflect

vdom，dom遍歷慢的緣由是由於dom對象的屬性和方法太多了，

dom diff

比較兩顆dom樹的差別，兩個樹徹底的diff算法是一個時間複雜度爲o(n^3)的問題，可是當在前端當中，你不多會跨越層級的移動dom，因此virtual dom只會對統一層級的元素進行對比，這樣的算法複雜度就能夠達到o(n)。

節點的拆一指的是什麼呢，

a。替換原來的節點，例如把div換成section

b。移動、刪除、新增子節點，例如，把子節點的p和ul的順序互換

c。修改了節點的屬性

d。對於文本節點，文本內容可能會改變

最好使用key標記dom，提升效率

專業版 patch和diff  https://github.com/snabbdom/sanbbdom

簡陋版的diff和patch，https://github.com/livoras/simple-virtual-dom/blob/master/lib/diff.js  ,    https://github.com/livoras/simple-virtual-dom/blob/master/lib/patch.js

雙向數據綁定的庫   hyperapp， kbrsh/moon

2. vuex

view 驅動actions 而後驅動state，state再驅動view

核心模塊

state，

Getters：純操做，對state裏的屬性進行的操做，沒有傳進數據，

Mutations：和外部的交互方法，用store.commit('name')調用，

Actions：能夠操做Mutations，能夠實現異步調用，使用dispatch調用，能夠設置調用次數，還可使用async和await

Modules（合併用的）

 

vuex-router-sync

 

https://vuex.vuejs.org/guide/plugins.html

3. vue運行時的優化

靜態的優化，循環優化，ssr的輸出，ssr的優化（preload，prefetch）

增長新的優化，

css的抽象原子css

Prepack

4. 路由的實現，或者說spa的實現

三種模式，咱們用到的是兩種hash和history，history在h5中新增長了 pushState和repalceState方法，

window.history.pushState(stateObject,title,url)
window.history,replaceState(stateObject,title,url)

這2個方法有個共同的特色：當調用他們修改瀏覽器歷史棧後，雖然當前url改變了，但瀏覽器不會當即發送請求該url，這就爲單頁應用前端路由，更新視圖但不從新請求頁面提供了基礎。

修改以後監聽修改就可實現視圖的修改，在HTML5History中添加對修改瀏覽器地址欄URL的監聽popstate是直接在構造函數中執行的

http://www.javashuo.com/article/p-rlwurbem-gt.html