前言
據網上流傳，有關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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270850.html
標籤：Html/Css
上一篇：Vue中路由傳參
下一篇：Hexo+Gitee搭建個人博客