♥ vue中$forceUpdate()

♥ vue中$forceUpdate()

1、认识

强制该组件重新渲染

鉴于 Vue 的全自动响应性系统,这个功能应该很少会被用到

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

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

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

2、使用

Vue2 中针对对象与数组的一些特殊操作会导致视图没有更新。检测变化的注意事项 --- Vue2.js

这时可以使用:

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

js 复制代码
html:

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

js:
egData: {}

...

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

注意:

这种做法并不推荐,官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题,如上data里不显示声明对象的属性

后添加属性时正确的做法时用 vm.$set() 方法,所以forceUpdate请慎用

JS 复制代码
this.$forceUpdate(); 强制刷新

同等效果的:window.location.reload()

1、$forceUpdate()

2、$set()

3、$nextTick()

相关推荐
中微子25 分钟前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z34 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录42 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子42 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神43 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao44 分钟前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风1 小时前
JS执行机制-event loop
javascript
止观止1 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
摆烂为不摆烂1 小时前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神1 小时前
cocos游戏开发中,如何制作一个空气墙
前端·javascript