Vue 基礎知識之 Vue.extend

Vue.extend 屬於 Vue 的全局 API，在實際業務開發中我們很少使用，因為相比常用的 Vue.component 寫法使用 extend 步驟要更加繁瑣一些。但是在一些獨立組件開發場景中，Vue.extend + $mount 這對組合是我們需要去關注的。

官方文檔

學習開始之前我們先來看一下官方文檔是怎麼描述的。

Vue.extend( options )

• 參數：

• {Object} options

• 用法：
  使用基礎 Vue 構造器，創建一個「子類」。參數是一個包含組件選項的對象。
  data 選項是特例，需要注意 - 在 Vue.extend() 中它必須是函數

<div id="mount-point"></div>

// 創建構造器
var Profile = Vue.extend({
template: <p>{{firstName}} {{lastName}} aka {{alias}}</p>,
data: function () {
return {
firstName: Walter,
lastName: White,
alias: Heisenberg
}
}
})
// 創建 Profile 實例，並掛載到一個元素上。
new Profile().$mount(#mount-point)


• 結果如下：

<p>Walter White aka Heisenberg</p>

• 參考：組件

可以看到，extend 創建的是 Vue 構造器，而不是我們平時常寫的組件實例，所以不可以通過 new Vue({ components: testExtend }) 來直接使用，需要通過 new Profile().$mount(#mount-point) 來掛載到指定的元素上。

為什麼使用 extend

在 vue 項目中，我們有了初始化的根實例後，所有頁面基本上都是通過 router 來管理，組件也是通過 import 來進行局部註冊，所以組件的創建我們不需要去關注，相比 extend 要更省心一點點。但是這樣做會有幾個缺點：

1. 組件模板都是事先定義好的，如果我要從介面動態渲染組件怎麼辦？
2. 所有內容都是在 #app 下渲染，註冊組件都是在當前位置渲染。如果我要實現一個類似於 window.alert() 提示組件要求像調用 JS 函數一樣調用它，該怎麼辦？

這時候，Vue.extend + vm.$mount 組合就派上用場了。

簡單示例

我們照著官方文檔來創建一個示例：

import Vue from vue
?
const testComponent = Vue.extend({
template: <div>{{ text }}</div>,
data: function () {
return {
text: extend test
}
}
})


然後我們將它手動渲染：

const extendComponent = new testComponent().$mount()


這時候，我們就將組件渲染掛載到 body 節點上了。

我們可以通過 $el 屬性來訪問 extendComponent 組件實例：

document.body.appendChild(extendComponent.$el)


如果想深入掌握 extend 知識，不妨做一個 alert 組件來實現類似於原生的全局調用。

加油！