Vue效能優化

而正是這種做法引發了效能問題，要初始化乙個父元件，必然需要先初始化它的子元件，而子元件又有它自己的子元件。那麼要初始化根標籤，就需要從底層開始冒泡，將頁面所有元件都初始化完。所以我們的頁面會在所有元件都初始化完才開始顯示。

這個結果顯然不是我們要的，更好的結果是頁面可以從上到下按順序流式渲染，這樣可能總體時間增長了，但首屏時間縮減，在使用者看來，頁面開啟速度就更快了。

要實現這種渲染模式，我總結了下有3種方式實現。第3種方式是我認為最合適的，也是我在專案中實際使用的優化方法。

這種方式非常簡單，例如：

拋棄了根元件，從而使a、b、c每乙個元件初始化完都立刻展示。但根元件在spa裡是非常必要的，所以這種方式只適用小型頁面。

非同步元件在官方文件已有說明，使用非常簡單：

new vue(,
b (resolve) )
}, 0);}}
})

這裡元件是乙個非同步元件，會等到手動呼叫resolve函式時才開始初始化，而父元件也不必等待先初始化完。

我們利用settimeout(fn, 0)將的初始化放在佇列最後，結果就是頁面會在初始化完後立刻顯示，然後再顯示。如果你的頁面有幾十個元件，那麼把非首屏的元件全設成非同步元件，頁面顯示速度會有明顯的提公升。

你可以封裝乙個簡單的函式來簡化這個過程：

function deferload (component, time = 0) ;
}new vue(
})

看起來很美好，但這種方式也有問題，考慮下這樣的結構:

還是按照上面的非同步元件做法，這時候就需要考慮把哪些元件設成非同步的了。如果把a、b、c都設成非同步的，那結果就是3個會首先渲染出來，頁面渲染的過程在使用者看來非常奇怪，並不是預期中的從上到下順序渲染。

new vue(,
created () , 0);
// 顯示c
settimeout(() => , 0);
}});

這個示例寫起來略顯囉嗦，但它已經實現了我們想要的順序渲染的效果。頁面會在a元件初始化完後顯示，然後再按順序渲染其餘的元件，整個頁面渲染方式看起來是流式的。

有些人可能會擔心v-if存在乙個編譯/解除安裝過程，會有效能影響。但這裡並不需要擔心，因為v-if是惰性的，只有當第一次值為true時才會開始初始化。

這種寫法看起來很麻煩，如果我們能實現乙個類似v-if的元件，然後直接指定多少秒後渲染，那就更好了，例如：

乙個簡單的指令即可，不需要js端任何配合，並且可以用在普通dom上面，nice！

在vue裡，類似v-if和v-for這種是terminal指令，會在指令內部編譯元件。如果你想要自己實現乙個terminal指令，需要加上terminal: true，例如：

vue.directive('lazy', ,
update () {},
unbind () {}
});

這是vue在1.0.19+新增的功能，由於比較冷門，文件也沒有特別詳細的敘述，最好的方式是參照著v-if和v-for的原始碼來寫。

我已經為此封裝了乙個terminal指令，你可以直接使用：

除了元件上的優化，我們還可以對vue的依賴改造入手。初始化時，vue會對data做getter、setter改造，在現代瀏覽器裡，這個過程實際上挺快的，但仍然有優化空間。

object.freeze()是es5新增的api，用來凍結乙個物件，禁止物件被修改。vue 1.0.18+以後，不會對已凍結的data做getter、setter轉換。

如果你確保某個data不需要跟蹤依賴，可以使用object.freeze將其凍結。但請注意，被凍結的是物件的值，你仍然可以將引用整個替換調。看下面例子：

}

new vue(,
])},
created () ,
];this.list = object.freeze([
,]);
}})