動態元件與 v-once 指令
摘要：
<div id="root">
<child-one></child-one>
<child-two></child-two>
<button>change</button&g...
<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
指令，可以提高一些靜態內容的展示效率