Vue 動態組件與 v-once 指令

<div id="root">
    <child-one></child-one>
    <child-two></child-two>
    <button>change</button>
</div>
Vue.component('child-one', {
    template: `<div>child-one</div>`,
})
Vue.component('child-two', {
    template: `<div>child-two</div>`,
})
let vm = new Vue({
    el: '#root'
})

上面代碼需實現，當點擊按鈕時，child-one和child-two實現toggle效果，該怎麼實現呢？

<div id="root">
    <child-one v-if="type === 'child-one'"></child-one>
    <child-two v-if="type === 'child-two'"></child-two>
    <button @click="handleBtnClick">change</button>
</div>
Vue.component('child-one', {
    template: `<div>child-one</div>`,
})
Vue.component('child-two', {
    template: `<div>child-two</div>`,
})
let vm = new Vue({
    el: '#root',
    data: {
        type:'child-one'
    },
    methods: {
        handleBtnClick(){
            this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
        }
    }
})

經過上面handleBtnClick函數的實現，配合v-if指令就能實現toggle效果

動態組件

下面這段代碼實現的效果和上面是同樣的。

<div id="root">
    <component :is="type"></component>      //is內容的變化，會自動的加載不一樣的組件
    <button @click="handleBtnClick">change</button>
</div>
Vue.component('child-one', {
    template: `<div>child-one</div>`,
})
Vue.component('child-two', {
    template: `<div>child-two</div>`,
})
let vm = new Vue({
    el: '#root',
    data: {
        type:'child-one'
    },
    methods: {
        handleBtnClick(){
            this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
        }
    }
})

動態組件的意思是它會根據is裏面數據的變化，會自動的加載不一樣的組件

v-noce指令

每次點擊按鈕切換的時候，Vue 底層會幫咱們幹什麼呢？Vue 底層會判斷這個child-one組件如今不用了，取而代之要用child-two組件，而後它就會把child-one組件銷燬掉，在建立一個child-two組件。假設這時child-two組件要隱藏，child-one組件要顯示，這個時候要把剛剛建立的child-two銷燬掉，在從新建立child-one組件，也就是每一次切換的時候，底層都是要銷燬一個組件，在建立一個組件，這種操做會消耗必定的性能。若是咱們的組件的內容，每次都是同樣的能夠在上面加一個v-once，看下面代碼。

Vue.component('child-one', {
    template: `<div v-once>child-one</div>`,
})
Vue.component('child-two', {
    template: `<div v-once>child-two</div>`,
})

加上v-once指令以後，有什麼好處呢？當chlid-one組件第一次被渲染時，由於組件上面有一個v-once指令，因此它直接就放到內存裏了，當切換的時候child-two組件第一次被渲染時，它也會被放到內存裏，再次點擊切換時，這時並不須要再從新建立一個child-one組件了，而是從內存裏直接拿出之前的child-one組件，它的性能會更高一些。

因此在 Vue 當中，經過v-once指令，能夠提升一些靜態內容的展現效率