在學習老黃的Vue2.0開發企業級移動端音樂Web App課程時，裡面有一個精美的確認彈窗元件，如下：
ref引用，需要呼叫事件來控制狀態。其實這個元件相對來說是比較獨立的，我們在使用元件庫的時候，相信都有呼叫過命令式彈窗元件的經歷，今天我們就來搞懂這種命令式元件的實現原理，以及將這個精美的彈窗元件改為命令式的，也就是這樣呼叫:
this.$Confirm({...})
.then(confirm => {
...
})
.catch(cancel => {
...
})
複製程式碼原理解析之extend和$mount
這兩個都是vue提供的API，不過在平時的業務開發中使用並不多。在vue的內部也有使用過這一對API。遇到巢狀元件時，首先將子元件轉為元件形式的VNode時，會將引入的元件物件使用extend轉為子元件的建構函式，作為VNode的一個屬性Ctor；然後在將VNode轉為真實的Dom的時候例項化這個建構函式；最後例項化完成後手動呼叫$mount進行掛載，將真實Dom插入到父節點內完成渲染。
所以這個彈窗元件可以這樣實現，我們自己對元件物件使用
extend轉為建構函式，然後手動呼叫$mount轉為真實Dom，由我們來指定一個父節點讓它插入到指定的位置。
在動手前，我們再多花點時間深入理解下流程細節：
extend
接受的是一個元件物件，再執行
extend時將繼承基類構造器上的一些屬性、原型方法、靜態方法等，最後返回Sub這麼一個構造好的子元件建構函式。擁有和vue基類一樣的能力，並在例項化時會執行繼承來的_init方法完成子元件的初始化。
Vue.extend = function (extendOptions = {}) {
const Super = this // Vue基類建構函式
const name = extendOptions.name || Super.options.name
const Sub = function (options) { // 定義建構函式
this._init(options) // _init繼承而來
}
Sub.prototype = Object.create(Super.prototype) // 繼承基類Vue初始化定義的原型方法
Sub.prototype.constructor = Sub // 建構函式指向子類
Sub.options = mergeOptions( // 子類合併options
Super.options, // components, directives, filters, _base
extendOptions // 傳入的元件物件
)
Sub['super'] = Super // Vue基類
// 將基類的靜態方法賦值給子類
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use
ASSET_TYPES.forEach(function (type) { // ['component', 'directive', 'filter']
Sub[type] = Super[type]
})
if (name) { 讓元件可以遞迴呼叫自己，所以一定要定義name屬性
Sub.options.components[name] = Sub // 將子類掛載到自己的components屬性下
}
Sub.superOptions = Super.options
Sub.extendOptions = extendOptions
return Sub // 返回子元件的建構函式
}
複製程式碼例項化Sub
執行
_init元件初始化的一系列操作，初始化事件、生命週期、狀態等等。將data或props內定義的變數掛載到當前this例項下，最後返回一個例項化後的物件。
Vue.prototype._init = function(options) { // 初始化
...
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm)
initState(vm)
initProvide(vm)
callHook(vm, 'created') // 初始化階段完成
...
if (vm.$options.el) { // 開始掛載階段
vm.$mount(vm.$options.el) // 執行掛載
}
}
複製程式碼$mount
在得到初始化後的物件後，開始元件的掛載。首先將當前
render函式轉為VNode，然後將VNode轉為真實Dom插入到頁面完成渲染。再完成掛載之後，會在當前元件例項this下掛載$el屬性，它就是完成掛載後對應的真實Dom，我們就需要使用這個屬性。
元件改造
1. 寫出元件 (完整程式碼在最後)
因為是
Promise的方式呼叫的，所以顯示後返回Promise物件，這裡只放出主要的JavaScript部分：
export default {
data() {
return {
showFlag: false,
title: "確認清空所有歷史紀錄嗎?", // 可以使用props
ConfirmBtnText: "確定", // 為什麼不用props接受引數
cancelBtnText: "取消" // 之後會明白
};
},
methods: {
show(cb) { // 加入一個在執行Promise前的回撥
this.showFlag = true;
typeof cb === "function" && cb.call(this, this);
return new Promise((resolve, reject) => { // 返回Promise
this.reject = reject; // 給取消按鈕使用
this.resolve = resolve; // 給確認按鈕使用
});
},
cancel() {
this.reject("cancel"); // 拋個字串
this.hide();
},
confirm() {
this.resolve("confirm");
this.hide();
},
hide() {
this.showFlag = false;
document.body.removeChild(this.$el); // 結束移除Dom
this.$destroy(); // 執行元件銷燬
}
}
};
複製程式碼2. 轉換呼叫方式
元件物件已經有了，接下來就是將它轉為命令式可呼叫的：
confirm/index.js
import Vue from 'vue';
import Confirm from './confirm'; // 引入元件
let newInstance;
const ConfirmInstance = Vue.extend(Confirm); // 建立建構函式
const initInstance = () => { // 執行方法後完成掛載
newInstance = new ConfirmInstance(); // 例項化
document.body.appendChild(newInstance.$mount().$el);
// 例項化後手動掛載，得到$el真實Dom，將其新增到body最後
}
export default options => { 匯出一個方法，接受配置引數
if (!newInstance) {
initInstance(); // 掛載
}
Object.assign(newInstance, options);
// 例項化後newInstance就是一個物件了，所以data內的資料會
// 掛載到this下，傳入一個物件與之合併
return newInstance.show(vm => { // 顯示彈窗
newInstance = null; // 將例項物件清空
})
}
複製程式碼這裡其實可以使用install做成一個外掛，還沒介紹它就略過了。首先使用extend將元件物件轉換為元件建構函式，執行initInstance方法後就會將真實Dom掛載到body的最後。為什麼之前不使用props而是用的data，因為它們初始化後都會掛載到this下，不過data程式碼量少。匯出一個方法給到外部使用，接受配置引數，呼叫後返回一個Promise物件。
3. 掛載到全域性
在
main.js內將匯出的方法掛載到Vue的原型上，讓其成為一個全域性方法：
import Confirm from './base/confirm/index';
Vue.prototype.$Confirm = Confirm;
試試這樣呼叫吧~
this.$Confirm({
title: 'vue大法好!'
}).then(confirm => {
console.log(confirm)
}).catch(cancel => {
console.log(cancel)
})
複製程式碼元件完整程式碼如下：
confirm/confirm.vue
<template>
<transition name="confirm-fade">
<div class="confirm" v-show="showFlag">
<div class="confirm-wrapper">
<div class="confirm-content">
<p class="text">{{title}}</p>
<div class="operate" @click.stop>
<div class="operate-btn left" @click="cancel">{{cancelBtnText}}</div>
<div class="operate-btn" @click="confirm">{{ConfirmBtnText}}</div>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
showFlag: false,
title: "確認清空所有歷史紀錄嗎?",
ConfirmBtnText: "確定",
cancelBtnText: "取消"
};
},
methods: {
show(cb) {
this.showFlag = true;
typeof cb === "function" && cb.call(this, this);
return new Promise((resolve, reject) => {
this.reject = reject;
this.resolve = resolve;
});
},
cancel() {
this.reject("cancel");
this.hide();
},
confirm() {
this.resolve("confirm");
this.hide();
},
hide() {
this.showFlag = false;
document.body.removeChild(this.$el);
this.$destroy();
}
}
};
</script>
<style scoped lang="stylus">
.confirm {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 998;
background-color: rgba(0, 0, 0, 0.3);
&.confirm-fade-enter-active {
animation: confirm-fadein 0.3s;
.confirm-content {
animation: confirm-zoom 0.3s;
}
}
.confirm-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
.confirm-content {
width: 270px;
border-radius: 13px;
background: #333;
.text {
padding: 19px 15px;
line-height: 22px;
text-align: center;
font-size: 18px;
color: rgba(255, 255, 255, 0.5);
}
.operate {
display: flex;
align-items: center;
text-align: center;
font-size: 18px;
.operate-btn {
flex: 1;
line-height: 22px;
padding: 10px 0;
border-top: 1px solid rgba(0, 0, 0, 0.3);
color: rgba(255, 255, 255, 0.3);
&.left {
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
}
}
}
}
}
@keyframes confirm-fadein {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes confirm-zoom {
0% {transform: scale(0);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
</style>
複製程式碼試著實現一個全域性的提醒元件吧，原理差不多的~
最後按照慣例我們還是以一道vue可能會被問到的面試題作為本章的結束~
面試官微笑而又不失禮貌的問道：
- 請說明下元件庫中命令式彈窗元件的原理？
懟回去：
- 使用
extend將元件轉為建構函式，在例項化這個這個建構函式後，就會得到$el屬性，也就是元件的真實Dom，這個時候我們就可以操作得到的真實的Dom去任意掛載，使用命令式也可以呼叫。
順手點個贊或關注唄，找起來也方便~
參考：
分享一個筆者寫的元件庫，說不定哪天用的上了 ~ ↓