前言
据网上流传,有关Vue组件重新渲染的方案往往存在如下四种。
1、借助route机制,刷新整个页面
2、使用v-if,将组件销毁、重新加载
3、使用内置的forceUpdate方法
4、使用key-changing优化组件
前两种没什么好说的,并且考虑到效率问题,本次主要是记录forceUpdate和key-changing两种组件渲染方法(不支持uni-app编写小程序)
force update
组件内置$forceUpdate方法,使用前需要在配置中启用。
import Vue from 'vue'
Vue.forceUpdate()
export default {
methods: {
handleUpdateClick() {
// built-in
this.$forceUpdate()
}
}
}
key-changing
原理很简单,vue使用key标记组件身份,当key改变时就是释放原始组件,重新加载新的组件。
<template>
<div>
<span :key="key"></span>
</div>
</template>
<script>
export default {
data() {
return {
key: 0
}
},
methods: {
handleUpdateClick() {
this.key += 1
}
}
}
</script>