vue中的$forceUpdate()($forceupdate() in Vue)

$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会更新
}
————————

$forceUpdate()

$forceupdate() forces the Vue instance to re render the virtual DOM, noting that it is not reloading the components.

Combined with the life cycle of Vue, after calling $forceupdate, only the BeforeUpdate and updated hook functions will be triggered, and other hook functions will not be triggered.

It only affects the instance itself and the subcomponents inserted into the slot content, not all subcomponents.

< strong > $forceupdate() usage scenario: < / strong >

1. When an object’s attribute is declared instead of being displayed in the data, it is added to the object later. In this case Vue, no data change can be detected. You can use $forceupdate()

html:

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

js:
egData: {}

...

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