vue组件中重新渲染的3种方式
改变key
-
这个是最推荐的。因为vue是通过虚拟Dom算法来判断元素的变化，是否变化的核心是通过判断新旧元素的key值是否变化。如果你的key是变化的，则重新渲染该元素，如果key没变，则不会重新渲染。
-
所以如果你想让你的组件重新渲染，你给组件加上
key属性，然后在需要重新渲染的时候，改变key的值就行。 -
<template> <div class="home"> <el-button @click="freshKey">test</el-button> <aComp :key="key"></aComp> </div> </template> <script> import aComp from '@/components/aComp' export default { components: { aComp }, data () { return { key: 0 } }, methods: { freshKey () { this.key++ } } } </script>
v-if
-
我们用的指令中，
v-if也是比较多的。 -
当你设置为
false的时候，当前条件块里包含的元素会被销毁，如果包含的是组件，则组件对应的生命周期函数（beforeDestroy，destroyed等）会执行。 -
当你设置为
true的时候，当前条件块里的元素会被重建，如果包含的是组件，则组件对应的生命周期函数（created，mounted等），计算属性，watch等会执行，相当于重新渲染。文章来源：https://www.toymoban.com/news/detail-650434.html
vm.$forceUpdate()
-
这个方法用的不多，是强制更新视图。文章来源地址https://www.toymoban.com/news/detail-650434.html
到了这里，关于vue组件中重新渲染的3种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
