vue2.x $forceUpdate 强制更新组件

1 概述

首先：感谢 Vue 的响应式系统，它始终知道何时进行更新 (如果你用对了的话)。

特殊场景：
（1）不过还是有一些边界情况，你想要强制更新，尽管表面上看响应式的数据没有发生改变。
（2）也有一些情况是你想阻止不必要的更新。

强制更新

【注意】如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。

原因：

• Vue 中 数组/对象的变更检测未触发。
• Vue 响应式系统追踪的状态之外的。

然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新，那么你可以通过 $forceUpdate 来做这件事

作用：是 vue 内部封装的核心方法，用于强制刷新 vue 组件。

语法

this.$forceUpdate()

应用 ！！！

1、解决 对象/数组 追加（没有初始化的）属性值不更新的问题；

方法 1：$forceUpdate 解决

methods:{
  updateName(){
    // tip： 原 data 内初始化的数据没有这个字段
    this.userInfo.name='小红'// 在此时，确实已经将userInfo对象修改完成
    console.log(this.userInfo.name); // 输出结果: 小红
    this.$forceUpdate(); // 在这里，强制刷新之后，页面的结果变为'小红'
  }
}

示例1：更新组件示例

方法 2：$set 解决

link> api
使用 $set 设置追加字段

注意

1、它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
（注意，组件的插槽子组件也会影响）