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等会执行,相当于重新渲染。
vm.$forceUpdate()
这个方法用的不多,是强制更新视图。