怎么在Vue中强制组件重新渲染？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
创新互联建站服务项目包括保亭黎族网站建设、
保亭黎族网站制作、保亭黎族网页制作以及保亭黎族网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，
保亭黎族网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到保亭黎族省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
简单粗暴的方式：重新加载整个页面
这相当于每次你想关闭应用程序时都要重新启动你的电脑。
这种方式或许有用，但这是一个非常糟糕的解决方案，不要这样做，我们来看看更好的方法。
不妥的方式：使用 v-if
v-if指令，该指令仅在组件为true时才渲染。 如果为false，则该组件在DOM中不存在。
来看看，v-if 是怎么工作的，在template中，添加v-if指令：
在script 中，使用nextTick的方法
上面的过程大致如下：
刚开始 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 },
];如果我们使用索引将其渲染出来，则会得到以下结果：
{{ person.name }} - {{ index }}
// 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 },
];
{{ person.name }} - {{ person.id }}
在我们从列表中删除Sarah之前，Vue删除了Sarah和James的组件，然后为James创建了一个新组件。现在，Vue知道它可以为Evan和James保留这两个组件，它所要做的就是删除Sarah的。
如果我们向列表中添加一个person，Vue 还知道可以保留所有现有的组件，并且只需要创建一个新组件并将其插入正确的位置。这是非常有用的，当我们有更复杂的组件，它们有自己的状态，有初始化逻辑，或者做任何类型的DOM操作时，这对我们很有帮助。
所以接下来看看，如果使用最好的方法来重新渲染组件。
更改 key 以强制重新渲染组件
最后，这是强制Vue重新渲染组件的最佳方法（我认为）。
我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。
这是一个非常基本的方法
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
看完上述内容，你们掌握怎么在Vue中强制组件重新渲染的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
名称栏目：怎么在Vue中强制组件重新渲染-创新互联
标题链接：
http://bzwzjz.com/article/ceipsp.html
