Vue强制组件重新渲染的方法讨论
版权申诉
5星 · 超过95%的资源 200 浏览量
2020-11-21
04:23:11
上传
评论
收藏 78KB PDF 举报 
Vue强制组件重新渲染的方法讨论强制组件重新渲染的方法讨论
有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开
当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？
强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染
组件。
这是一个非常简单的解决方案。
当然，你可能会对其他方式会更感兴趣：
简单粗暴的方式：重新加载整个页面
不妥的方式：使用 v-if
较好的方法：使用Vue的内置forceUpdate方法
最好的方法：在组件上进行 key 更改
简单粗暴的方式：重新加载整个页面简单粗暴的方式：重新加载整个页面
这相当于每次你想关闭应用程序时都要重新启动你的电脑。
这种方式或许有用，但这是一个非常糟糕的解决方案，不要这样做，我们来看看更好的方法。
不妥的方式：使用不妥的方式：使用 v-if
v-if指令，该指令仅在组件为true时才渲染。 如果为false，则该组件在DOM中不存在。
来看看，v-if 是怎么工作的，在template中，添加v-if指令：
<template>
<my-component v-if="renderComponent" />
</template>
在script 中，使用nextTick的方法
<script>
export default {
data() {
return {
renderComponent: true,
};
},
methods: {
forceRerender() {
// 从 DOM 中删除 my-component 组件
this.renderComponent = false;
this.$nextTick(() => {
// 在 DOM 中添加 my-component 组件
this.renderComponent = true;
});
}
}
};
</script>
上面的过程大致如下：
刚开始 renderComponent设置为true，因此渲染 my-component 组件
当我们调用forceRerender时，我们立即将renderComponent设置为false
我们停止渲染my-component，因为v-if指令现在计算结果为false
在nextTick方法中将renderComponent设置回true
当v-if指令的计算结果为true时，再次渲染my-component
在这个过程中，有两个部分比较重要
首先，我们必须等到nextTick，否则我们不会看到任何变化。
在Vue中，一个 tick 是一个DOM更新周期。Vue将收集在同一 tick 中进行的所有更新，在 tick 结束时，它将根据这些更新来渲
染 DOM 中的内容。如果我们不等到next tick，我们对renderComponent的更新就会自动取消，什么也不会改变。
- 1
- 2
前往页