vue2.x學習筆記（十七）

動态元件&異步元件

在前面學習元件基礎的時候學習過動态元件，官方文檔給出過一個例子：在一個多标簽的界面中使用【is】屬性來切換不同的元件：

在上面的例子中，切換元件是會建立一個新的執行個體的，這就意味着你在前一個元件所做的一些操作不會被儲存下來。但是當在這些元件之間進行切換的時候，你有時會想要保持這些元件的狀态，以避免重複渲染導緻的性能問題。是以vue提供了一個特殊的标簽用來解決這一場景。

在動态元件上使用keep-alive

重新建立動态元件的行為通常是非常有用的，但是有些時候我們可能會更希望一些元件執行個體能夠被在它們第一次被建立的時候緩存下來。為了解決這個問題，我們可以使用一個<keep-alive>元素将其動态元件包裹起來。

但是要注意的是，這個<keep-alive>元素要求被切換到的元件必須要有自己的名字，不管是通過元件的【name】選項，還是局部/全局注冊，否則會出現意料之外的問題。

異步元件

在大型的應用中，我們可能會需要将應用分割成小一些的代碼塊，并且隻在需要的時候才從伺服器加載一個子產品。為了簡化，vue允許你以一個工廠函數的方式定義你的元件，這個工廠函數會異步解析你的元件定義。vue隻有在這個元件需要被渲染的時候才會觸發該工廠函數，且會把結果緩存起來供未來重渲染，例如：

如你所見，這個工廠函數會收到一個resolve回調，這個回調函數會在你從伺服器得到元件定義的時候被調用。同樣的，你也可以調用【reject(reason)】來表示加載失敗。這裡的setTimeout是為了示範用的，如何擷取元件取決于你自己。一個推薦的做法是将異步元件和webpack的code-splitting功能一起配合使用：

你也可以在工廠函數中傳回一個promise，是以把webpack 2和es2015的文法加在一起，我們可以寫成這樣：

當使用局部注冊的時候，你也可以直接提供一個傳回promise的函數：

另外的，作者明确表示元件的異步加載不會被browserify官方支援，是以官方文檔建議直接使用webpack，以擁有内置的頭等異步支援。

處理加載狀态

vue在2.3.0+中還新增了一個這樣的文法，支援異步元件工廠函數傳回一個如下格式的對象：

但是要注意的是，如果你希望在vue router的路由元件中使用上述文法的話，你必須使用vue router 2.4.0+的版本。

"我還是很喜歡你，像輕翻宮商角徵羽，驚破雲霓。"

你要去做一個大人，不要回頭，不要難過。