在vue.js中使用this.$forceUpdate()是强制更新方法，作用是触发vue的update方法。可以用在解决数据对象新增属性和数组新增数据，出现页面不渲染的问题。
在前端开发过程中数据处理尤为重要，在使用Vue时我们会事先定义好数据，数据中包含基本数据、对象、数组，其中对象中可能还会有数组，数组中也还会有数组或者对象，这样就形成了深结构数据。我们在给这些深层次的数据赋值或者给对象添加新的属性，页面上的数据并不会同步更新，这是因为受js的限制vue不能检测到对象属性的添加或者删除，所以vue不允许在已经定义好的数据上动态的添加新的属性值。针对此种情况，此时我们可以使用vue的强制刷新方法，在赋值完成之后调用this.$forceUpdate()，这样页面上就能加载我们改变的数据。
在vue2中直接
this.$forceUpdate()
在vue3中直接
import { getCurrentInstance, ComponentInternalInstance } from "vue"; setup(){ //解构赋值 设置别名that 也可不写 :that 直接ctx //ctx 得到普通对象 //proxy得到响应式对象 // 推荐使用第二种proxy 严谨写法 // 第一种写法 let {ctx:that, proxy}:any = getCurrentInstance() that.$forceUpdate() // 第二种写法 const { proxy } = getCurrentInstance() as ComponentInternalInstance proxy!.$forceUpdate() }
参考:
