vue 重新渲染组件,vue强制重新渲染数据
本文主要介绍vue中强制组件重渲染的正确方法，帮助你更好的理解和使用Vue框架。感兴趣的朋友可以了解一下。
有时候，仅仅依靠vue响应来更新数据是不够的。相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新渲染组件呢？
强制Vue重新渲染组件的最好方法是在组件上设置：key。当我们需要重新渲染组件时，只需要改变key的值，Vue就会重新渲染组件。
这是一个非常简单的解决方案。
当然，您可能对其他方式更感兴趣：
简单粗暴的方法：重新加载整个页面
方式不当：用v-if。
更好的方法：使用Vue内置的forceUpdate方法。
最好的方法：对组件进行关键的更改。
简单粗暴的方式：重新加载整个页面
这相当于每次要关闭应用程序时都要重启电脑。
这种方法可能有用，但它是一个非常糟糕的解决方案。不要这样做。我们来看看更好的方法。
不妥的方式：使用v-if
V-if指令，仅在组件为真时呈现。如果为false，则组件在DOM中不存在。
让我们看看v-if是如何工作的。在模板中，添加v-if指令：
模板
my-component v-if= render component /
/模板
在脚本中，使用nextTick的方法。
脚本
导出默认值{
data() {
返回{
renderComponent: true，
};
},
方法：{
force render(){
//从DOM中删除my-component组件
this.renderComponent=false
这个。$nextTick(()={
//在DOM中添加my-component组件
this.renderComponent=true
});
}
}
};
/脚本
以上过程大致如下：
首先，renderComponent设置为true，因此呈现my-component组件。
当我们调用forceRerender时，我们立即将renderComponent设置为false。
我们停止渲染my-component，因为v-if指令现在计算为false。
在nextTick方法中将renderComponent设置回true。
当v-if指令的评估结果为真时，再次渲染my-component。
在这个过程中，有两个部分比较重要。
首先我们要等到nextTick，否则看不到任何变化。
在Vue中，一个tick是一个DOM更新周期。Vue会收集同一个tick内所有的更新，在tick结束时，会根据这些更新渲染DOM中的内容。如果我们不等到下一个tick，我们对renderComponent的更新将自动取消，什么也不会改变。
其次，当我们第二次渲染时，Vue会创建一个全新的组件。Vue将销毁第一个组件并创建一个新的组件，这意味着我们新的my-component将像正常一样经历其所有生命周期——创建、挂载等。
此外，nextTick可以与promise一起使用：
force render(){
//从DOM中删除my-component组件
this.renderComponent=false
这个。$nextTick()。然后(()={
this.renderComponent=true
});
}
但是，这并不是一个好的解决办法，还是按照Vue希望我们做的去做吧。
较好的方法：forceUpdate 方法
这是解决这个问题的两个最好的方法之一，这两个方法都得到Vue的官方支持。
通常，Vue通过更新视图来响应依赖关系的变化。然而，当我们调用forceUpdate时，也有可能强制更新，即使所有的依赖项实际上并没有改变。
以下是大多数人在使用这种方法时会犯的最大错误。
如果Vue在事情发生变化时自动更新，为什么我们还需要强制更新？
原因是有时候Vue的响应系统会很混乱。我们以为Vue会对某个属性或变量的变化做出反应，其实不是。在某些情况下，Vue的响应系统根本无法检测到任何变化。
所以就像上一个方法一样，如果你需要这个来重新渲染你的组件，可能会有更好的方法。
在组件实例本身和全局调用forceUpdate有两种不同的方法：
//全局
从“Vue”导入Vue；
vue . force update()；
//使用组件实例
导出默认值{
方法：{
methodThatForcesUpdate() {
//.
这个。$ force update()；
//.
}
}
}
重要提示：这不会更新任何计算属性，调用forceUpdate只会强制重新呈现视图。
最好的方法：在组件上进行key更改
很多情况下，我们需要重新渲染组件。
为了正确地做到这一点，我们将提供一个键属性，以便Vue知道特定的组件与特定的数据相关联。如果键保持不变，组件就不会改变，但是如果键改变了，Vue就会知道应该删除旧的组件，创建一个新的组件。
正是我们需要的！
但首先，我们需要绕一小段路来理解为什么在Vue中使用key。
为什么我们需要在 Vue 中使用 key
一旦你理解了这一点，那么知道如何以正确的方式强制重新渲染就迈出了一小步。
假设我们想要呈现具有以下一个或多个组件的列表：
有一个地方政府
某种初始化过程，通常在一个已创建或已挂载的钩子中
通过jQuery或公共api的无响应DOM操作
如果您对列表进行排序或以任何其他方式更新它，您需要重新呈现列表的某些部分。但是，您不会希望重新呈现列表中的所有内容，而只是更改的内容。
为了帮助Vue跟踪已更改和未更改的内容，我们提供了一个关键属性。这里使用数组的索引，因为索引没有绑定到列表中的特定对象。
const people=[
{姓名：埃文，年龄：34 }，
{姓名：莎拉，年龄：98 }，
{姓名：詹姆斯，年龄：45 }，
];
如果我们用索引来渲染它，我们会得到以下结果：
保险商实验所
李v-for=(person，index) in people :key=index
{{ person.name }} - {{ index }}
/李
/ul
//输出
埃文- 0
莎拉- 1号
詹姆斯- 2
如果删除Sarah，您会得到：
埃文- 0
詹姆斯一号
与詹姆斯相关联的索引被改变，即使詹姆斯仍然是詹姆斯。詹姆斯将被重新渲染，这不是我们想要的。
所以在这里，我们可以使用唯一的id作为密钥。
const people=[
{ id:这是一个id ，姓名：埃文，年龄：34 }，
{ id:唯一id ，姓名：莎拉，年龄：98 }，
{ id:另一个唯一id ，姓名：詹姆斯，年龄：45 }，
];
保险商实验所
Li v-for= person in people :key= person . id
{{ person.name }} - {{ person.id }}
/李
/ul
在我们从列表中删除Sarah之前，Vue删除了Sarah和James的组件，然后为James创建了一个新组件。现在，Vue知道它可以为Evan和James保留这两个组件。它只需要删除莎拉的。
如果我们将一个人添加到列表中，Vue也知道我们可以保留所有现有的组件，我们只需要创建一个新的组件并将其插入正确的位置。当我们有更复杂的组件时，这是非常有用的，这些组件有自己的状态、初始化逻辑或进行任何类型的DOM操作，这对我们非常有帮助。
那么接下来让我们来看看，是否使用了最好的方法来重新渲染组件。
更改 key 以强制重新渲染组件
最后，这是强制Vue重新渲染组件的最好方法(我认为)。
我们可以采用这种给子组件分配键的策略，但是我们只需要在每次想要重新渲染组件时更新键。
这是一个很基本的方法。
模板
要重新呈现的组件：key=componentKey /
/模板
导出默认值{
data() {
返回{
componentKey: 0
};
},
方法：{
force render(){
this . component key=1；
}
}
}
每次调用forceRerender时，我们的componentKey都会改变。当这种情况发生时，Vue将知道它必须销毁组件并创建一个新的组件。我们得到的是一个子组件，它将重新初始化自己并“重置”其状态。
如果真的需要重新渲染某个东西，就选择调变法，而不是其他方法。
以上是vue中强制组件重渲染的正确方法细节。更多关于Vue中强制组件渲染的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。