A brief discussion on how to re-render in vue components? 3 ways to share

How to re-render in vue component? The following article will summarize and share several ways to re-render Vue components. I hope it will be helpful to everyone!

I recently encountered a requirement, which is to re-render the current component. This is easy to do, just notify the parent component to re-render.

Below I will summarize the several ways of re-rendering vue components that I know. [Related recommendations: "vue.js Tutorial"]

Change key

This is the most recommended.

Because Vue uses the virtual Dom algorithm to determine the change of elements, the core of the change is to determine whether the key values ​​​​of the old and new elements have changed. If your key changes, the element will be re-rendered. If the key has not changed, it will not be re-rendered.

So if you want your component to re-render, you add the key attribute to the component, and then change the value of the key when it needs to be re-rendered.

The component will be re-rendered, and the corresponding life cycle functions, calculated properties, watches, etc. will be executed.

<template>
  <div class="home">
    <el-button @click="freshKey">test</el-button>
    <aComp :key="key"></aComp>
  </div>
</template>

<script>
import aComp from &#39;@/components/aComp&#39;
export default {
  components: {
    aComp
  },
  data () {
    return {
      key: 0
    }
  },
  methods: {
    freshKey () {
      this.key++
    }
  }
}
</script>

v-if

Among the instructions we use, v-if is also relatively common.

When you set it to false, the elements contained in the current conditional block will be destroyed. If it contains a component, the corresponding life cycle function of the component (beforeDestroy, destroyed, etc.) will be executed.

When you set it to true, the elements in the current conditional block will be rebuilt. If it contains a component, the component's corresponding life cycle function (created, mounted, etc.), calculated properties, watch, etc. will be executed, which is equivalent to re-rendering.

vm.$forceUpdate()

This method is not used much, it is to force the view to be updated.

But Vue is two-way bound. When the data changes, the view will be refreshed in real time. Under what circumstances will this method be used?

For example, vue only refreshes the view for these methods of arrays:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

So for example, when you reassign a value to the array, vue The view will not be refreshed. Then you can use this method to force refresh the view.

export default {
  data () {
    return {
      arr: [1, 2, 3]
    }
  },
  methods: {
    editArr () {
      this.arr[0] = 0 // 视图不会刷新
    },
    forceUpdate () {
      this.$forceUpdate() // 调用这个方法会刷新视图
    }
  }
}

When the vue instance executes this method, it only refreshes the view. The life cycle functions, calculated properties, watches, etc. corresponding to the instance will not be re-executed.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A brief discussion on how to re-render in vue components? 3 ways to share. For more information, please follow other related articles on the PHP Chinese website!