擴充套件例項構造器

Vue.extend返回的是一個“擴充套件例項構造器”，也就是一個預設了部分選項的 Vue 例項構造器。剛學的時候對“擴充套件例項構造器”這一名詞感覺很疑惑，其實它就像建構函式，建構函式中會事先定義好一些屬性，new出來的物件也就預設有建構函式中的屬性，同理Vue.extend也是如此，看下例：

 1 //DOM
 2 <div id="point"></div>
 3
 
 
 4 // 構建一個擴充套件例項構造器
 5 var todoItem = Vue.extend({
 6     template: ` <p v-on:click="wordClick"> {{ text }} </p> `,
 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

toast.vue

 1 <template>
 2     <transition name="message">
 3         <div class="toastWrap" v-if="toastShow" v-html="toastVal"></div>
 4     </transition>
 5 </template>
 6 
 7 <script>
 8 export default {
 9     name: 'Toast'
10 }
11 </script>
12 
13 <style scoped lang="scss">
14     ...
15 </style>

在該檔案中可以事先寫好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;

App.vue

...
mounted() {
    this.$toast('這是一個tast彈窗',2000)
},
...

至此就是對vue中extend的理解