今日又学一招~ vue 强制更新视图
$forceUpdate
vm.$forceUpdate() 迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
forceUpdate就是重新render
- 有些变量不在
state上，但是你又想达到这个变量更新的时候，刷新render； -
state里的某个变量层次太深，更新的时候没有自动触发render。
这些时候都可以手动调用forceUpdate自动触发render。所以建议使用immutable来操作state，redux等flux架构来管理state。
举个栗子
那在 vue 框架中，如果 data 中有一个变量: name，修改他，页面会自动更新。
但如果 data 中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的。
<template>
<p>{{userInfo.name}}</p>
<button @click="updateName">修改userInfo</button>
</template>
<script>
data(){
return{
userInfo: {name:'pp'}
}
},
methods:{
updateName(){
this.userInfo.name='zz'
}
}
</script>
在 updateName 函数中，我们尝试给 userInfo 对象修改值，but 然并卵!!!
这时候有两种解决方法：
法一：
methods:{
updateName(){
this.userInfo.name='zz' //在此时，确实已经将userInfo对象修改完成
console.log(this.userInfo.name); //输出结果: zz
this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'zz'
}
}
法二：
methods:{
updateName(){
this.$set('userInfo',name,'zz');
}
}
这是我发上一篇文章 VUE使用 Lodash 的 remove 方法删除数组项后，视图不更新 有热心网友在下面评论学到的~感谢大家的不吝赐教。如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
最后：写作不易，如要转裁，请标明转载出处。
