快捷導(dǎo)航

Vue 動(dòng)態(tài)組件與 v-once 指令的實(shí)現(xiàn)

更新時(shí)間：2019年02月12日 09:13:25 作者：UCCs

這篇文章主要介紹了Vue 動(dòng)態(tài)組件與 v-once 指令的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文介紹了Vue 動(dòng)態(tài)組件與 v-once 指令的實(shí)現(xiàn)，分享給大家，具體如下：

<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'
})

上面代碼需實(shí)現(xiàn)，當(dāng)點(diǎn)擊按鈕時(shí)，child-one和child-two實(shí)現(xiàn)toggle效果，該怎么實(shí)現(xiàn)呢？

<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'
    }
  }
})

通過(guò)上面handleBtnClick函數(shù)的實(shí)現(xiàn)，配合v-if指令就能實(shí)現(xiàn)toggle效果

動(dòng)態(tài)組件

下面這段代碼實(shí)現(xiàn)的效果和上面是一樣的。

<div id="root">
  <component :is="type"></component>   //is內(nèi)容的變化，會(huì)自動(dòng)的加載不同的組件
  <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'
    }
  }
})

動(dòng)態(tài)組件的意思是它會(huì)根據(jù)is里面數(shù)據(jù)的變化，會(huì)自動(dòng)的加載不同的組件

v-noce指令

每次點(diǎn)擊按鈕切換的時(shí)候，Vue 底層會(huì)幫我們干什么呢？Vue 底層會(huì)判斷這個(gè)child-one組件現(xiàn)在不用了，取而代之要用child-two組件，然后它就會(huì)把child-one組件銷毀掉，在創(chuàng)建一個(gè)child-two組件。假設(shè)這時(shí)child-two組件要隱藏，child-one組件要顯示，這個(gè)時(shí)候要把剛剛創(chuàng)建的child-two銷毀掉，在重新創(chuàng)建child-one組件，也就是每一次切換的時(shí)候，底層都是要銷毀一個(gè)組件，在創(chuàng)建一個(gè)組件，這種操作會(huì)消耗一定的性能。如果我們的組件的內(nèi)容，每次都是一樣的可以在上面加一個(gè)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指令之后，有什么好處呢？當(dāng)chlid-one組件第一次被渲染時(shí)，因?yàn)榻M件上面有一個(gè)v-once指令，所以它直接就放到內(nèi)存里了，當(dāng)切換的時(shí)候child-two組件第一次被渲染時(shí)，它也會(huì)被放到內(nèi)存里，再次點(diǎn)擊切換時(shí)，這時(shí)并不需要再重新創(chuàng)建一個(gè)child-one組件了，而是從內(nèi)存里直接拿出以前的child-one組件，它的性能會(huì)更高一些。

所以在 Vue 當(dāng)中，通過(guò)v-once指令，可以提高一些靜態(tài)內(nèi)容的展示效率

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: