Vue 動態(tài)組件與 v-once 指令的實現

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

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

本文介紹了Vue 動態(tài)組件與 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效果

動態(tài)組件

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

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

動態(tài)組件的意思是它會根據is里面數據的變化，會自動的加載不同的組件

v-noce指令

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

VUE+Element實現增刪改查的示例源碼
這篇文章主要介紹了VUE+Element實現增刪改查的示例源碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-11-11
vue bus全局事件中心簡單Demo詳解
ue-bus 提供了一個全局事件中心，并將其注入每一個組件，你可以像使用內置事件流一樣方便的使用全局事件。這篇文章給大家介紹了vue bus全局事件中心簡單Demo，需要的朋友參考下吧
2018-02-02
vue動態(tài)路由匹配和路由懶加載多種方法詳解
這篇文章主要介紹了vue動態(tài)路由匹配和路由懶加載,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
element-ui中select下拉框加載大數據渲染優(yōu)化方式
這篇文章主要介紹了element-ui中select下拉框加載大數據渲染優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue組件文檔生成備注詳解
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue cli3適配所有端方案的實現
這篇文章主要介紹了vue cli3適配所有端方案的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
Vue.js+Layer表格數據綁定與實現更新的實例
下面小編就為大家分享一篇Vue.js+Layer表格數據綁定與實現更新的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
nginx部署訪問vue-cli搭建的項目的方法
本篇文章主要介紹了nginx部署訪問vue-cli搭建的項目的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
打通前后端構建一個Vue+Express的開發(fā)環(huán)境
這篇文章主要介紹了打通前后端構建一個Vue+Express的開發(fā)環(huán)境，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
vue如何實現關閉對話框后刷新列表
這篇文章主要介紹了vue如何實現關閉對話框后刷新列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04