关于vue.js:Vue中强制组件重新渲染的正确方法

有时候,依赖Vue响应式形式更新数据是不够的,相同,咱们须要手动从新渲染组件来更新数据。或者,咱们可能只想抛开以后DOM,从新开始。问题来了,怎么让Vue以正确的形式出现组件呢?

1.有以下解决办法:

简略粗犷的形式:从新加载整个页面
不妥的形式:应用 v-if
较好的形式:应用 Vue的内置 forceUpdate办法

2.比照以上办法:

简略粗犷的形式(从新加载整个页面):这相当于每次你想敞开应用程序时都要重新启动你的电脑。
不妥的形式(应用v-if):v-if指令,该指令尽在组件上为 true时才渲染。如果为false,则该组件在DOM中不存在。
较好的办法(forceUpdate):这是解决这个问题的两种最佳办法之一。

3.然而下面的三种办法都不是最佳的办法,最好的办法是:在组件上进行 key更改。

在很多状况下,咱们须要从新渲染组件。
要正确地做到这一点,咱们将提供一个 key 属性,以便Vue晓得特定的组件与特定的数据片段相关联。如果 key 放弃不变,则不会更改组件,然而如果 key 产生更改,Vue就hi晓得应该删除旧组件并创立新组件。

4.为什么咱们须要在 Vue 中应用 key?

假如咱们要渲染具备以下一项或多项内容的组件列表:
有本地的状态
有某种初始化过程,通常在 create或mounted钩子中

如果你对该列表进行排序或任何其余形式对其进行更新,则须要从新渲染列表的某些局部。然而,不会心愿从新渲染列表的所有内容,而只是从新渲染已更改的内容。
为了帮忙Vue跟踪已更改和未更改的内容,咱们提供一个 key 属性。在这里应用数组的索引,因为索引没有绑定列表中的特定的对象。
5.更新 key 以强制从新渲染组件

这是强制 Vue从新渲染组件的最佳形式(集体认为)
咱们能够采纳这种将 key调配给子组件的策略,但每次想从新渲染组件时,只需更新该 key 即可。

如下案例:

<template>
 <Chenperson :key="numberkey"></Chenperson>
</template>

exprot default{
 data(){
   return{
    numberkey:0,
   }
 },
 methods:{
   chenRender(){
    this.numberkey +=1;
   }
 }
}
每次 chenRender被调用时,咱们的 numberkey都会产生扭转。当这种状况产生时,Vue将晓得它必须销毁组件并创立一个新组件。咱们失去的是一个子组件,它将从新初始化本身并重置其状态。

6.本期的分享到了这里就完结啦,是不是有播种了一些,心愿对你有所帮忙,让咱们一起致力走向巅峰!

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

阿里云限时活动-2核2G-5M带宽-40-100G SSD服务器,特惠价86元/年(原价724元/年,限时99元续购三次),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据