Vue.extend的理解

在使用element-ui的过程中，我相信你在使用到类似this.$message功能的时候，会觉得这个功能真的非常方便，不用import入组件，全局都可以调用。它就是通过Vue.extend + $mount实现。

扩展实例构造器

Vue.extend返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器。刚学的时候对“扩展实例构造器”这一名词感觉很疑惑，其实它就像构造函数，构造函数中会事先定义好一些属性，new出来的对象也就默认有构造函数中的属性，同理Vue.extend也是如此，看下例：

//DOM
<div id="point"></div>

// 构建一个扩展实例构造器
var todoItem = Vue.extend({
    template: ` <p v-on:click="wordClick"> {{ text }} </p> `,
    data() {
        return {
            text: 'default word'
        }
    },
    methods:{
        wordClick(){
            console.log('click me')
        }
    }
})
//实例化一个新的对象并绑定到对应的DOM元素上
new todoItem({
    data() {
        return {
            text: 'hello world'
        }
    }
}).$mount('#point');

todoItem是一个“扩展实例构造器”，预设了template，data，methods，当new出一个新的对象的时候，新对象也默认拥有这些模块，同时也可以替换新的属性，非常灵活。

封装toast插件

一般在项目开发过程中，会新建一个plugins文件夹放编写的插件，一个插件对应一个文件夹，文件夹里包含两个文件，一个js文件和vue文件。

屏幕快照 2019-06-23 下午12.27.36.png

toast.vue

<template>
    <transition name="message">
        <div class="toastWrap" v-if="toastShow" v-html="toastVal"></div>
    </transition>
</template>

<script>
export default {
    name: 'Toast'
}
</script>

<style scoped lang="scss">
    ...
</style>

在该文件中可以事先写好toast的DOM结构和对应的样式

toast.js

import Vue from 'vue'
import toastComponent from './toast.vue'

const ToastConstructor = Vue.extend(toastComponent);

function showToast(toastVal='default',time=1000){
    let ToastDOM = new ToastConstructor({
        el:document.createElement('div'),
        data(){
            return {
                toastVal:toastVal,
                toastShow:false
            }
        }
    });
    document.body.appendChild(ToastDOM.$el);
    ToastDOM.toastShow = true;
    let timer = setTimeout(res=>{
        clearTimeout(timer);
        ToastDOM.toastShow = false;
    },time);
}

Vue.prototype.$toast = showToast;

在全局调用$toast方法就是触发了绑定在Vue原型上的showToast方法，可以将Toast动态插入到body中，而不用像Component组件一样，都要预先import引入，相比较起来会方便很多。

App.vue

...
mounted() {
    this.$toast('这是一个tast弹窗',2000)
},
...