Vue.js 子組件的異步加載及其生命周期控制

lidashuang 發布于2019-08-22 11:17 / 2395人閱讀

摘要：本文主要對組件化開發中子組件的異步加載和其生命周期進行一些探討。異步組件討論異步加載，需要先了解下異步組件。生命周期控制在使用子組件或者叫局部注冊時，我們可能需要在子組件實例化或者叫創建完畢后做某些事情。

前端開發社區的繁榮，造就了很多優秀的基于 MVVM 設計模式的框架，而組件化開發思想也越來越深入人心。這其中不得不提到 Vue.js 這個專注于 VM 層的框架。

本文主要對 Vue.js 組件化開發中子組件的異步加載和其生命周期進行一些探討。閱讀本文需要對 Vue.js 有一定的了解。

注意：本文中的一些例子代碼，是以 vue-cli 采用 webpack 模板初始化的項目為基礎。

異步組件

討論異步加載，需要先了解下異步組件。Vue.js 的異步組件是把組件定義為一個工廠函數，在組件需要渲染時觸發工廠函數，并且把結果緩存起來，用于后面的再次渲染。例如注冊一個全局異步組件：

Vue.component("async-demo", function(resolve, reject) {
  setTimeout(function() {
    // 將組件定義傳入 resolve 回調函數
    resolve({
      template: "I am async!"
 ? ? ?// 組件的其他選項
    })
  }, 1000)
})

異步子組件和全局注冊很類似：

Vue.component("parent-demo", {
 ?// 父組件的其他選項
 ?components: {
 ? ?"async-demo": function(resolve, reject) {
      setTimeout(function() {
        // 將組件定義傳入 resolve 回調函數
        resolve({
          template: "I am async!"
 ? ? ? ? ?// 子組件的其他選項
        })
      }, 1000)
    }
  }
})

工廠函數的第一個參數 resolve 為成功后的回調，第二個參數 reject 為失敗后的回調，可以在這里提示用戶加載失敗等。

這里使用 setTimeout 只是為了模擬異步，在實際項目中，應該配合 webpack 的代碼分離功能來實現異步加載。

異步加載

在實際的項目中，如果不使用異步加載，則 Vue.js 組件的 JS、CSS 和模板都會打包到一個 .js 文件中，這個文件可能達到幾 MB 甚至更多，嚴重影響首屏加載時間。所以在項目中我們需要啟用組件的異步加載。

webpack 代碼分離

webpack 的代碼分離有兩種，第一種，也是優先選擇的方式是，使用符合 ECMAScript 提案的 import() 語法。第二種，則是使用 webpack 特定的 require.ensure。讓我們先看看第一種：

import() 調用會在內部用到 promises。如果在舊有版本瀏覽器中使用 import()，記得使用一個 polyfill 庫（例如 es6-promise 或 promise-polyfill），來 shim Promise。

Vue.component(
  "async-demo",
  // 該 import 函數返回一個 Promise 對象。
  () => import("./async-demo")
)

上面的例子中，前文提到的工廠函數支持返回一個 Promise 對象，所以可以使用 import() 這種代碼分離方式。

局部注冊也是類似的：

Vue.component("parent-demo", {
 ?// 父組件的其他選項
 ?components: {
 ? ?"async-demo": () => import("./async-demo")
  }
})

本質上，import() 函數返回一個 Promise 實例，你可以自定義這個過程，下文會有說明。

第二種 webpack 代碼分離是這樣的：

Vue.component("async-demo", function(resolve) {
  require.ensure([], function(require) {
    resolve(require("./async-demo"))
  }, function(error) {
 ? ?// 加載出錯執行這里
 ?})
})

看起來比較繁瑣，如果你使用 webpack 2 及以上版本，則不建議使用第二種方式。

生命周期控制

在使用子組件（或者叫局部注冊）時，我們可能需要在子組件實例化（或者叫創建完畢）后做某些事情。在非異步的子組件中，我們很容易做這件事：

上例中使用了 Vue.js 的子組件引用，所以可以在生命周期函數 mounted 中很方便的獲取到子組件的實例，這樣就可以在這個函數中處理一些子組件實例化后要做的事情。

但是在異步子組件中，mounted 函數中是無法獲取到子組件的實例的，所以我們需要一些技巧來實現這個功能。

上例中，可以看到我們對組件異步加載做了一些特殊的控制，其中 import().then() 則是在加載完子組件的 .js 文件后，實例化子組件之前的回調，如果需要處理出錯的情況，則 import().then().catch() 即可。

以上代碼只是注入了一個 created 函數，如果要注入其他生命周期函數，例如 mounted，也是類似的：

通過上面的討論，我們可以做到完全控制 Vue.js 組件的異步加載的全過程，這對于需要精確控制子組件加載的組件，會有很大的幫助。

演示項目

根據上面的思路，寫了一個基于 Bootstrap 的異步彈窗演示項目：

https://github.com/hex-ci/vue...

GPU云服務器云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92126.html

vue面試

摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數據模型，數據和業務邏輯都在Model層中定義；View 代表UI視圖，負責數據的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
Vue面試中，經常會被問到的面試題/Vue知識點整理

摘要：可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。我工作中只用到，對和不怎么熟與的區別相同點都支持指令內置指令和自定義指令都支持過濾器內置過濾器和自定義過濾器都支持雙向數據綁定都不支持低端瀏覽器。看看面試題，只是為了查漏補缺，看看自己那些方面還不懂。切記不要以為背了面試題，就萬事大吉了，最好是理解背后的原理，這樣面試的時候才能侃侃而談。不然，稍微有水平的面試官一看就能看出，是...

mengbo 2019-08-23 11:54 評論0 收藏0
Vue面試中，經常會被問到的面試題/知識點(2019改進版)

摘要：在第一版的基礎上進行了優化，新增一些面試題知識點，對一些知識點進行更加深入的描述。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。改變中的狀態的唯一途徑就是顯式地提交。這兩個可以在不進行刷新的情況下，操作瀏覽器的歷史紀錄。在第一版的基礎上進行了優化，新增一些面試題/知識點，對一些知識點進行更加深入的描述。一、對于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0