Implementation of Vue dynamic components and v-once directives

This article introduces the implementation of Vue dynamic components and v-once instructions. It is shared with you, as follows:

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

The above code needs to be implemented. When clicking the button, child-one and child-two implement the toggle effect. How to implement it?

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

Through the implementation of the handleBtnClick function above, the toggle effect can be achieved with the v-if instruction

Dynamic Components

The effect of the following code is the same as above.

<div >
  <component :is="type"></component>   // Changes in the content of the is will automatically load different components  <button @click="handleBtnClick">change</button>
</div>
('child-one', {
  template: `<div>child-one</div>`,
})
('child-two', {
  template: `<div>child-two</div>`,
})
let vm = new Vue({
  el: '#root',
  data: {
    type:'child-one'
  },
  methods: {
    handleBtnClick(){
       =  === 'child-one' ? 'child-two' : 'child-one'
    }
  }
})

Dynamic components mean that they will automatically load different components according to the changes in the data in I.

v-noce directive

Every time I click the button to switch, what will Vue bottom layer do for us? The Vue underlying layer will determine that the child-one component is no longer used now, and instead use the child-two component, and then it will destroy the child-one component and create a child-two component. Suppose that the child-two component needs to be hidden at this time and the child-one component needs to be displayed. At this time, the child-two that has just been created must be destroyed. When recreating the child-one component, that is, every time the switch is switched, the underlying layer needs to destroy a component. When creating a component, this operation will consume a certain amount of performance. If the content of our component is the same every time, you can add a v-once to it and see the following code.

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

What are the benefits after adding the v-once instruction? When the chlid-one component is rendered for the first time, it is placed directly in memory because there is a v-once instruction on the component. When the child-two component is rendered for the first time, it will also be placed in memory. When clicking to switch again, there is no need to recreate a child-one component, but directly take out the previous child-one component from memory, and its performance will be higher.

Therefore, in Vue, the v-once directive can improve the display efficiency of some static content

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.