Vue 中 强制组件重新渲染的正确方法
作者: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><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
的更新就会自动取消,什么也不会改变。
其次,当我们第二次渲染时,Vue将创建一个全新的组件。Vue 将销毁第一个,并创建一个新的,这意味着我们的新my-component
将像正常情况一样经历其所有生命周期-created
,mounted
等。
另外,nextTick
可以与 promise 一起使用:
forceRerender() {// 从 DOM 中删除 my-component 组件this.renderComponent = false;this.$nextTick().then(() => {this.renderComponent = true;});
}
不过,这并不是一个很好的解决方案,所以,让我们做 Vue 想让我们做的
较好的方法:forceUpdate 方法
这是解决这个问题的两种最佳方法之一,这两种方法都得到了Vue的官方支持。
通常情况下,Vue 会通过更新视图来响应依赖项中的更改。然而,当我们调用forceUpdate
时,也可以强制执行更新,即使所有依赖项实际上都没有改变。
下面是大多数人使用这种方法时所犯的最大错误。
如果 Vue 在事情发生变化时自动更新,为什么我们需要强制更新呢?
原因是有时候 Vue 的响应系统会让人感到困惑,我们认为Vue会对某个属性或变量的变化做出响应,但实际上并不是这样。在某些情况下,Vue的响应系统根本检测不到任何变化。
所以就像上一个方法,如果你需要这个来重新渲染你的组件,可能有一个更好的方法。
有两种不同的方法可以在组件实例本身和全局调用forceUpdate
:
// 全局
import Vue from 'vue';
Vue.forceUpdate();// 使用组件实例
export default {methods: {methodThatForcesUpdate() {// ...this.$forceUpdate();// ...}}
}
重要提示:这不会更新任何计算属性,调用forceUpdate
仅仅强制重新渲染视图。
最好的方法:在组件上进行 `key` 更改
在许多情况下,我们需要重新渲染组件。
要正确地做到这一点,我们将提供一个key
属性,以便 Vue 知道特定的组件与特定的数据片段相关联。如果key
保持不变,则不会更改组件,但是如果key
发生更改,Vue 就会知道应该删除旧组件并创建新组件。
正是我们需要的!
但是首先,我们需要绕一小段路来理解为什么在Vue中使用key
。
为什么我们需要在 Vue 中使用 key
一旦你理解了这一点,那么这是了解如何以正确方式强制重新渲染的很小的一步。
假设我们要渲染具有以下一项或多项内容的组件列表:
有本地的状态
某种初始化过程,通常在
created
或mounted
钩子中通过jQuery或普通api进行无响应的DOM操作
如果你对该列表进行排序或以任何其他方式对其进行更新,则需要重新渲染列表的某些部分。但是,不会希望重新渲染列表中的所有内容,而只是重新渲染已更改的内容。
为了帮助 Vue 跟踪已更改和未更改的内容,我们提供了一个key
属性。在这里使用数组的索引,因为索引没有绑定到列表中的特定对象。
const people = [{ name: 'Evan', age: 34 },{ name: 'Sarah', age: 98 },{ name: 'James', age: 45 },
];
如果我们使用索引将其渲染出来,则会得到以下结果:
<ul><li v-for="(person, index) in people" :key="index">{{ person.name }} - {{ index }}</li>
</ul>// Outputs
Evan - 0
Sarah - 1
James - 2
如果删除Sarah
,得到:
Evan - 0
James - 1
与James
关联的索引被更改,即使James
仍然是James
。James
会被重新渲染,这并不是我们希望的。
所以这里,我们可以使用唯一的 id
来作为 key
const people = [{ id: 'this-is-an-id', name: 'Evan', age: 34 },{ id: 'unique-id', name: 'Sarah', age: 98 },{ id: 'another-unique-id', name: 'James', age: 45 },
];<ul><li v-for="person in people" :key="person.id">{{ person.name }} - {{ person.id }}</li>
</ul>
在我们从列表中删除Sarah
之前,Vue删除了Sarah
和James
的组件,然后为James
创建了一个新组件。现在,Vue知道它可以为Evan
和James
保留这两个组件,它所要做的就是删除Sarah
的。
如果我们向列表中添加一个person
,Vue 还知道可以保留所有现有的组件,并且只需要创建一个新组件并将其插入正确的位置。这是非常有用的,当我们有更复杂的组件,它们有自己的状态,有初始化逻辑,或者做任何类型的DOM操作时,这对我们很有帮助。
所以接下来看看,如果使用最好的方法来重新渲染组件。
更改 key 以强制重新渲染组件
最后,这是强制Vue重新渲染组件的最佳方法(我认为)。
我们可以采用这种将key
分配给子组件的策略,但是每次想重新渲染组件时,只需更新该key
即可。
这是一个非常基本的方法
<template><component-to-re-render :key="componentKey" />
</template>export default {data() {return {componentKey: 0,};},methods: {forceRerender() {this.componentKey += 1; }}
}
每次forceRerender
被调用时,我们的componentKey
都会改变。当这种情况发生时,Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件,它将重新初始化自身并“重置”其状态。
如果确实需要重新渲染某些内容,请选择key
更改方法而不是其他方法。
原文:https://hackernoon.com/the-correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad
交流
能解决 80% 需求的 10个 CSS动画库
如何解决 Render Props 的回调地狱
动图演示23个常用 VsCode 快捷键(Window & Mac)
集五福的最全攻略,让你每天多得 6 张福卡
Vue 中 强制组件重新渲染的正确方法相关推荐
- vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
- vue中父子组件先后渲染_vue父子组件传值(子传父,非父子组件传值)
1. 子组件向父组件传值 子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
- vue/uniapp 强制组件重新渲染的几种方式
添加小程序,兑换各种视频教程/数据资源. 问题:当父组件向子组件传值时,如果改值存在多层数组/对象嵌套,此时改数据变动时,可能造成在子组件中不会重新渲染. 解决方案:如下. <template& ...
- vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例 子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
- vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用,详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个 详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
- ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式 问题 历程 UploadList 组件源码 h() 方法 实现 注 问题 技术:vue.ant design vue 在开发项 ...
- vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
- Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
最新文章
- 通过产品ID得到collection!!!
- 校招经验分享—高考结束!校招还会远么~~
- 微众银行 CAIO 杨强:人工智能的新三大定律(附视频)
- 全数字FM接收机2---仿真
- opencv高效遍历图像
- Java基础笔记18
- 斯坦福大学机器学习第八课“神经网络的表示(Neural Networks: Representation)”
- 2.13 break和continue
- 实战MySQL升级的最佳方法
- 【css】常用的几种水平垂直居中方式与盒子模型,面试经常问到!
- java实现int类型数组元素拷贝
- 浅谈SAP Cloud for Sales 自动化
- Android之项目全部能正常登录但是部分资源没有显示成功的解决办法
- 华为申请注册鸿蒙商标,华为申请“鸿蒙商标”,企业注册商标有什么价值?
- 这些黑科技让百姓安心、安全过年
- 用友网络2021年净利润7.1亿元 同比减少28.2%
- leetcode题解347-前 K 个高频元素
- 阿里巴巴CTO程立:CTO就是要给CEO扫清障碍和风险
- 详细微信小程序API文档
- js回调函数使用方法
热门文章
- php ldap目录协议,PHP 通过LDAP协议,操作Windows Active Directory
- [已解决]win11家庭版安装软件提示,系统策略禁止安装此设备。请与系统管理员联系
- moto+早期android手机,王者归来 MOTO近期Android手机汇总
- STM32F051用jlink V8进行调试设置MDK环境buc
- 股票波动率 python_如何统计投资品种波动率(python)?
- 【ES6闯关】Promise堪比原生的自定义封装then、catch、resolve、reject...
- Makfile详解-工作流程
- [从零开始学习FPGA编程-41]:视野篇 - 摩尔时代与摩尔定律以及后摩尔时代的到来
- Android语音通话实现方案及相关技术介绍
- Windows系统下的PDF编辑工具软件-PDF编辑器下载