重新渲染组件的方法总结
有时Vue的反应性系统还不够，您只需要重新渲染组件即可。
重新渲染组件有以下几个办法：
- 可怕的方法：重新加载整个页面
- 可怕的方法：使用v-if
- 更好的方法：使用Vue的内置forceUpdate方法
- 最好的方法：在组件上进行key更改
重新加载整个页面
非常不建议这样做，我们来看下一个办法
v-if指令，该指令仅在组件为true时才渲染。 如果为false，则该组件在DOM中不存在。
下面我们设置它以使其v-if能够正常工作的方式。
在您的template，您将添加v-if指令：
<template>
<my-component v-if="renderComponent" />
</template>script您将添加使用以下方法nextTick：
<script>
export default {
data() {
return {
renderComponent: true,
};
},
methods: {
forceRerender() {
// 从 DOM 中删除 my-component 组件
this.renderComponent = false;
this.$nextTick(() => {
// 在 DOM 中添加 my-component 组件
this.renderComponent = true;
});
}
}
};
</script>这里发生的事情：
- 最初renderComponent设置为true，因此my-component组件渲染
- 在forceRerender中我们立即设置renderComponent为false
- 停止渲染组件my-component，因为该v-if指令现在的值为false
- 在nextTick中将renderComponent上设置回true
- 现在该v-if结果为true，因此我们my-component再次开始渲染
我们必须等到nextTick，否则我们不会看到任何变化。
在Vue中，一个 nextTick 是一个DOM更新周期。Vue将收集在同一 nextTick 中进行的所有更新，在 nextTick 结束时，它将根据这些更新来渲染 DOM 中的内容。如果我们不等到nextTick，我们对renderComponent的更新就会自动取消，什么也不会改变。
其次，当我们第二次渲染时，Vue将创建一个全新的组件。 Vue 将销毁第一个，并创建一个新的，这意味着我们的新my-component将像正常情况一样经历其所有生命周期-created，mounted等。
不过，这并不是一个很好的解决方案，往下看
使用forceUpdate
方法解读：
Vue中，$forceUpdate()的使用
方文档中指出，$forceUpdate具有强制刷新的作用。那在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。
但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的<template>
<p>{{userInfo.name}}</p>
<button @click="updateName">修改userInfo</button>
</template>
<script>
data(){
return{
userInfo:{name:'小明'}
}
},
methods:{
updateName(){
this.userInfo.name='小红'
}
}
</script>在updateName函数中，我们尝试给userInfo对象修改值，发现页面其实并没有变化
那这时候有两种解决方法：
方法一：
methods:{
updateName(){
this.userInfo.name='小红'//在此时，确实已经将userInfo对象修改完成
console.log(this.userInfo.name);//输出结果: 小红
this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'小红'
}
}$forceUpdate() 这个方法也可以处理 修改for循环 里面 item的属性值,没有渲染出来添加这个方法也生效
方法二：
methods:{
updateName(){
this.$set('userInfo',name,'小红');
}
}这是解决此问题的两种最佳方法之一，此方法得到Vue的官方支持。
下面是示例：
forceUpdate在组件实例本身以及全局实例上，可以通过两种不同的方式调用
// 全局
import Vue from 'vue';
Vue.forceUpdate();
// 使用组件实例
export default {
methods: {
methodThatForcesUpdate() {
// ...
this.$forceUpdate();
// ...
}
}
}重要提示：这不会更新您拥有的任何计算属性。调用forceUpdate只会强制重新渲染视图
最好的方法：修改组件的key达到组件重新渲染
在许多情况下，我们需要重新渲染组件。
要正确地做到这一点，我们将提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会知道应该删除旧组件并创建新组件。
我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。
<template>
<component-to-re-render :key="componentKey" />
</template>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
//this.componentKey += new Date();
}
}
}每次 forceRerender被调用时，我们的componentKey都会改变。
当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。
我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
