vue组件中怎么重新渲染？下面本篇文章就来给大家总结分享vue组件的重新渲染的几种方式，希望对大家有所帮助！
最近遇到一个需求，就是得把当前的组件重新渲染。这个好办，通知父组件去重新渲染就行。
下面我把我知道的vue组件的重新渲染的几种方式总结一下。【相关推荐：《vue.js教程》】
这个是最推荐的。
因为vue是通过虚拟Dom算法来判断元素的变化，是否变化的核心是通过判断新旧元素的key值是否变化。如果你的key是变化的，则重新渲染该元素，如果key没变，则不会重新渲染。
所以如果你想让你的组件重新渲染，你给组件加上key属性，然后在需要重新渲染的时候，改变key的值就行。
组件会重新渲染，相应的生命周期函数，计算属性，watch等都会执行。
<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也是比较多的。
当你设置为false的时候，当前条件块里包含的元素会被销毁，如果包含的是组件，则组件对应的生命周期函数（beforeDestroy，destroyed等）会执行。
当你设置为true的时候，当前条件块里的元素会被重建，如果包含的是组件，则组件对应的生命周期函数（created，mounted等），计算属性，watch等会执行，相当于重新渲染。
这个方法用的不多，是强制更新视图。
但是vue是双向绑定的，数据变化，视图也会实时刷新，什么情况下会用到这个方法呢？
比如vue只针对数组的这些方法会刷新视图：
push()pop()shift()unshift()splice()sort()reverse()所以比如你对数组的某个值重新赋值的时候，vue是不会刷新视图的。 那么你就可以用这个方法来强制刷新视图。
export default {
data () {
return {
arr: [1, 2, 3]
}
},
methods: {
editArr () {
this.arr[0] = 0 // 视图不会刷新
},
forceUpdate () {
this.$forceUpdate() // 调用这个方法会刷新视图
}
}
}vue实例执行这个方法的时候，仅仅只是刷新视图，实例对应的生命周期函数，计算属性，watch等不会重新执行。
更多编程相关知识，请访问：编程入门！！
以上是浅谈vue组件中怎么重新渲染？3种方式分享的详细内容。更多信息请关注PHP中文网其他相关文章！
