- 刷新整个页面(最low的,可以借助
route
机制) - 使用
v-if
标记(比较low的) - 使用内置的
forceUpdate
方法(较好的) -
provide、inject
- 使用
key-changing
优化组件(最好的)
provide、inject
切换路由出口 通过子孙组件调用事件进行销毁创建的切换
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>