vue强制更新视图 $forceUpdate()

今日又学一招~ 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 方法删除数组项后，视图不更新 有热心网友在下面评论学到的~感谢大家的不吝赐教。如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
最后：写作不易，如要转裁，请标明转载出处。