作者:Michael Thiessen
译者:前端小智
来源:hackernoon
有时候,依赖 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>
if="renderComponent" />template>
在script
中,使用nextTick
的方法
<script>export default {
data() {
return {
renderComponent: true,