Vue的雙向綁定用著確實(shí)方便误趴,但自動(dòng)檔雖好,手動(dòng)檔也不是一無(wú)是處售葡;在特定的情況下挟伙,還真的要手工觸發(fā)“刷新”操作模孩,目前有四種方案可以選擇:
- 刷新整個(gè)頁(yè)面(最low的榨咐,可以借助
route
機(jī)制) - 使用
v-if
標(biāo)記(比較low的) - 使用內(nèi)置的
forceUpdate
方法(較好的) - 使用
key-changing
優(yōu)化組件(最好的)
前面兩種種不多介紹了祭芦,我們重點(diǎn)介紹后面的兩個(gè):
force update
組件內(nèi)置$forceUpdate
方法龟劲,使用前需要在配置中啟用昌跌。
import Vue from 'vue'
Vue.forceUpdate()
export default {
methods: {
handleUpdateClick() {
// built-in
this.$forceUpdate()
}
}
}
key-changing
原理很簡(jiǎn)單蚕愤,vue使用key
標(biāo)記組件身份萍诱,當(dāng)key
改變時(shí)就是釋放原始組件,重新加載新的組件包竹。
<template>
<div>
<span :key="key"></span>
</div>
</template>
<script>
export default {
data() {
return {
key: 0
}
},
methods: {
handleUpdateClick() {
this.key += 1
}
}
}
</script>