在vue+webpack中如何實現非同步元件載入？

下面我就為大家分享一篇vue webpack實作非同步元件載入的方法，具有很好的參考價值，希望對大家有幫助。

8.9更新：之前想搬遷到csdn的時候因為邀請碼問題遲遲沒把博客轉過來，所以跑去博客園了，今天發現csdn已經幫我把文章搬過來，有必要修正一下這篇文章。

寫這篇文章的時候因為剛接觸vue，所以搗鼓的時候有些迷糊。

----------------/*以下可以跳過*/-------------- ---

本來很簡單的事情折騰好久。

1.vue文件只給了Vue.component('comp_name',function(resolve,reject){})在回調裡ajax載入元件定義內容的例子，但現在習慣.vue檔案寫元件，在點選路由取得.vue的時候怎麼弄呢？

2.webpack的coding-split支援commonjs/amd語法，即有不同的實作。網路上查了n多案例亂七八糟的，最後確定兩種寫法

commonjs語法：const setting = resolve => require.ensure([], ()=> resolve(require('./components /setting.vue')),'setting');

文檔的寫法：resolve =>require(['./components/setting.vue')],resolve);//懶載入

當時我是結合了路由一起練習，用的第一種，在github上看到的，require.ensure是webpack的語法，在打包的時候將require.ensure部分指定的程式碼切出來打包在另一個chunk上，webpack.config.js裡面加上chunkFileName項目即可。 require.ensure的三個參數分別是：依賴的url，回調，自訂的chunk的名字。

其實，code split本質上就是，將你require的模組單獨出來另外打包，等用到的時候再由瀏覽器發起異步獲取，並透過scriptdom的形式插入到head中，這是它的底層實現。我自己嘗試的時候，每取得一次非同步元件，head中都會插入兩個標籤，一個script,yigestyle,因為.vue檔案最終會解析成html,css和js。

PS：其實webpack官網的範例程式碼並沒有resolve=>這種寫法，直接在函數裡require.ensure就是了，一開始有點疑惑，網路找不到解，自己研究發現require.ensure這個函數，webpack打包編譯之後

是一個_webpack_require_.e的函數，本身就是一個thenable實例，require.ensure的回調放到_webpack_require_.e.then (fn)裡面，這下子就很明顯了，webpack的這個語法本身應該是一個promise實例，只是上面獲取vue組件的寫法裡，因為require.ensure是封裝好的語法，只好把resolve傳入其父函數中，在require.ensure的回調裡透過作用域鏈獲取並呼叫。這也揭露了，resolve函數不一定要在promise的函數參數中，其出現位置可以靈活設置，在阮一峰老師的ES6入門裡提到過，resolve函數是js引擎能提供的，不需要自己部署。

----------------/*以上可跳過*/------------ ------

首先，非同步元件的使用沒剛接觸時以為的那麼複雜。

1.如果套用官網的方式是可以的：

#HTML：

<input type="button" @click="showchild" value="show"> //点击按钮后，show为真,先获取child组件，再渲染p内容
<p id="contain" v-if="show">
 <child></child>
 </p>

JS：

//...
data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   show:false
  }
 },
 methods: {
  showchild:function(){
   this.show=true;
   }
 },
 components: {
   'child': function(resolve) {
    require(['./components/child.vue'], resolve);
 }

*注意：載入非同步元件的時候，元件名稱後邊的.vue不要忽略。

這個例子應該比較直覺了。點選按鈕之後改變了變數show的布林值為真，由於child.vue是非同步元件，所以會先ajax取得元件然後渲染。

在很多情況下非同步元件會配合vue-router使用來切換視圖，其實這時候用哪種語法的都可以。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在jQuery中有關Dom元素使用方法？

在js中常用陣列函數有哪些？

關於vue2.0中datepicker使用方法

#

以上是在vue+webpack中如何實現非同步元件載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！