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