Vue的双向绑定用着确实方便,但自动档虽好,手动档也不是一无是处;在特定的情况下,还真的要手工触发“刷新”操作,目前有四种方案可以选择:
- 刷新整个页面(最low的,可以借助route机制)this.$router.go(0)
- 使用v-if标记(比较low的)
- 使用内置的forceUpdate方法(较好的)
- 使用key-changing优化组件(最好的)
前面两种种不多介绍了,我们重点介绍后面的两个:
$forceUpdate
调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期,
export default {
methods: {
handleUpdateClick() {
// built-in
this.$forceUpdate()
}
},
updated(){
console.log('更新了')
}
}
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>