关于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. 本期的分享到了这里就完结啦, 是不是有播种了一些, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!