vue中对extend的理解

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

扩展实例构造器

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

 1 //DOM
 2 

 3 
 4 // 构建一个扩展实例构造器
 5 var todoItem = Vue.extend({
 6     template: ` 
 {{ text }} 
 `,
 7     data() {
 8         return {
 9             text: 'default word'
10         }
11     },
12     methods:{
13         wordClick(){
14             console.log('click me')
15         }
16     }
17 })
18 //实例化一个新的对象并绑定到对应的DOM元素上
19 new todoItem({
20     data() {
21         return {
22             text: 'hello world'
23         }
24     }
25 }).$mount('#point');

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

封装toast插件

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

toast.vue

 1 
 6 
 7 
12 
13 

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

toast.js

 1 import Vue from 'vue'
 2 import toastComponent from './toast.vue'
 3 
 4 const ToastConstructor = Vue.extend(toastComponent);
 5 
 6 function showToast(toastVal='default',time=1000){
 7     let ToastDOM = new ToastConstructor({
 8         el:document.createElement('div'),
 9         data(){
10             return {
11                 toastVal:toastVal,
12                 toastShow:false
13             }
14         }
15     });
16     document.body.appendChild(ToastDOM.$el);
17     ToastDOM.toastShow = true;
18     let timer = setTimeout(res=>{
19         clearTimeout(timer);
20         ToastDOM.toastShow = false;
21     },time);
22 }
23 
24 Vue.prototype.$toast = showToast;

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

App.vue

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

 至此就是对vue中extend的理解