Vue中通過Vue.extend動態(tài)創(chuàng)建實(shí)例

seanHai 發(fā)布于2019-08-26 10:45 / 655人閱讀

摘要：中通過動態(tài)創(chuàng)建實(shí)例在中，如果我們想要動態(tài)地來控制一個組件的顯示和隱藏，比如通過點(diǎn)擊按鈕顯示一個對話框或者彈出一條信息。通過創(chuàng)建構(gòu)造器這個構(gòu)造器用于需要顯示是創(chuàng)建實(shí)例。

Vue中通過Vue.extend動態(tài)創(chuàng)建實(shí)例

在Vue中，如果我們想要動態(tài)地來控制一個組件的顯示和隱藏，比如通過點(diǎn)擊按鈕顯示一個對話框或者彈出一條信息。我們通常會提前寫好這個組件，然后通過v-if = “show”來控制它的顯示隱藏。如下所示：

    
        
        這是一條通過按鈕控制顯示隱藏的信息

另外還有一種實(shí)現(xiàn)方法就是通過Vue.extend來動態(tài)地創(chuàng)建實(shí)例，在想要進(jìn)行顯示的時候創(chuàng)建實(shí)例。
在需要隱藏的時候刪除這個實(shí)例。

通過Vue.extend創(chuàng)建構(gòu)造器,這個構(gòu)造器用于需要顯示是創(chuàng)建實(shí)例。

const Constructor = Vue.extend({
    template:` {{message}} `,
    data(){
        return {
            message:"這是一條通過按鈕控制顯示隱藏的信息"
        }
    }
})

需要顯示時創(chuàng)建實(shí)例

showHandle(){
    const MessageCom = this.MessageCom = new Constructor({
        propsData:{
            show:true
        }
    }).$mount();

    this.$refs.message.appendChild(MessageCom.$el);
}

需要隱藏時刪除實(shí)例

hiddenHandle(){
    this.MessageCom.$el.remove()
    this.MessageCom.$destroy()
    this.MessageCom = null
}

這樣的話就同樣實(shí)現(xiàn)了一個顯示，隱藏效果。

使用場景

通過上面的分析，我們發(fā)現(xiàn)這種操作完全沒有必要，相比于通過屬性來控制顯示和隱藏；創(chuàng)建實(shí)例顯得更加麻煩。
但是它同樣具有一定的使用場景。比如：單元測試時：

單元測試

在進(jìn)行單元測試時，為了實(shí)現(xiàn)在Vue中的測試，我們必須創(chuàng)建一個基于某個組件的實(shí)例，然后才能進(jìn)行測試。
如下所示：

    it("可以設(shè)置icon.", () => {
        const Constructor = Vue.extend(Button)
        const vm = new Constructor({
        propsData: {
            icon: "settings"
        }
        }).$mount()
        const useElement = vm.$el.querySelector("use")
        expect(useElement.getAttribute("xlink:href")).to.equal("#i-settings")
        vm.$destroy()
    })

替代DOM操作

在一些場合下，我們可能需要創(chuàng)建一個div這種，通常的實(shí)現(xiàn)方式如下：

let oDiv = document.createElement();
oDiv.innerHTML = "hello,world";
document.body.appendChild(oDiv);

但是，在Vue中操作DOM是非常不推薦的寫法，這時候我們建議使用Vue.extend來實(shí)現(xiàn)DOM的操作。

      const Constructor = Vue.extend(Toast);
      let oDiv = new Constructor();
      oDiv.$slots.default = [message];
      oDiv.$mount(); //必須使用$mount()進(jìn)行掛載，否則所有的生命周期的函數(shù)都不會執(zhí)行
      document.body.appendChild(oDiv.$el)

總結(jié)：

Vue.extend可以用于動態(tài)地創(chuàng)建實(shí)例，在一些場景下可以使用。