Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to re-render in the vue component". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to re-render in the vue component.

Change key

This is the most recommended one.

Because vue judges the change of elements through the virtual Dom algorithm, the core of whether the change is through judging whether the key value of the new and old elements has changed. If your key is changed, re-render the element, and if the key does not change, it will not re-render.

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

The component will be re-rendered, and the corresponding lifecycle functions, calculation properties, watch, and so on will be executed.

Test import aComp from'@ / components/aComp'export default {components: {aComp}, data () {return {key: 0}}, methods: {freshKey () {this.key++} v-if

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

When you set it to false, the elements contained in the current condition block will be destroyed, and if it contains a component, the corresponding lifecycle function (beforeDestroy,destroyed, etc.) of the component will be executed.

When you set it to true, the elements in the current condition block will be rebuilt, and if it contains a component, the corresponding life cycle functions (created,mounted, etc.), computational attributes, watch, etc., will be executed, which is equivalent to re-rendering.

Vm.$forceUpdate ()

This method does not use much, but forces the view to be updated.

But vue is bidirectionally bound, the data changes, and the view is refreshed in real time. Under what circumstances will this method be used?

For example, vue's methods for arrays only refresh the view:

Push ()

Pop ()

Shift ()

Unshift ()

Splice ()

Sort ()

Reverse ()

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

Export default {data () {return: [1,2,3]}}, methods: {editArr () {this.arr [0] = 0 / / the view will not be refreshed}, forceUpdate () {this.$forceUpdate () / / call this method to refresh the view}

When the vue instance executes this method, it only refreshes the view, and the lifecycle functions, calculation properties, watch, etc., corresponding to the instance will not be re-executed.

Thank you for reading, the above is the content of "how to re-render in vue components". After the study of this article, I believe you have a deeper understanding of how to re-render this problem in vue components, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.