vue中$set和$forceUpdate强制更新视图层的区别

$forceUpdate 原理:调用 notify()  强制视图更新  

$set 原理:defineReactive(this.data数据, 要劫持得数组索引或对象键, 默认值)     建立响应式依赖    指定数据更新

使用场景: 如果data数据的层级过深(比如数组或者对象无法直接监听到数据变化),导致无法响应式显示

解决方法一:$set()

this.$set(target,key,value)

解决方法二:$forceUpdate()

this.$forceUpdate()

结合vue的生命周期,调用 $forceupdate 后只会触发beforeupdate和updated这两个钩子函数,不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件

-------------------------------------
注意:但是$forceUpdate()这种做法并不推荐,官方说如果你现在的场景需要用$forceupdate方法,那么99%是你的操作有问题,比如data里不显示声明对象的属性,之后添加属性时正确的做法时用 vm.$set() 方法,所以$forceupdate请慎用。

posted @ 2023-07-15 14:43  搲社会主义墙角  阅读(168)  评论(0编辑  收藏  举报