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
请慎用。