uniapp中$forceUpdate()的用处

最新推荐文章于 2024-07-22 15:00:00 发布

落落寒灯灭

最新推荐文章于 2024-07-22 15:00:00 发布

阅读量2.4k

点赞数 1

分类专栏： js uniapp 文章标签： uni-app vue.js javascript

本文链接：https://blog.csdn.net/qq_36519327/article/details/129492704

版权

js 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

uniapp

7 篇文章 0 订阅

订阅专栏

文章讲述了Vue中$forceUpdate()方法的作用，它是用来强制重新渲染虚拟DOM，但不包括组件的重新加载。在数据未声明而后期添加属性导致Vue无法检测到变化时，可使用此方法，但推荐使用$set()。$forceUpdate()只会触发beforeUpdate和updated钩子，且只影响实例本身和插入插槽的子组件。然而，频繁使用$forceUpdate可能表明设计问题，应谨慎使用。

摘要由CSDN通过智能技术生成

$forceUpdate()

$forceUpdate()迫使vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。

结合vue的生命周期，调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。

它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

$forceUpdate()使用场景：

1、当在data里没有显示的声明一个对象的属性，而是之后给该对象添加属性，这种情况vue是检测不到数据变化的，可以使用$forceUpdate()

html:

<span class="test">{{egData.value}}</span>
<el-button @click="changeData">改变</el-button>

js:
egData: {}

...

changeData () {
    this.egData.value = 'oldValue'
    this.$forceUpdate()  // dom会更新
}