场景描述
在vue的世界中，MVVM 框架的数据驱动视图变化，这是一种常识；不过，有没有可能，我们在变更数据之后，视图居然不会进行变化的情况呢？
vue的数据双绑
vue 的核心底层逻辑就是 通过数据劫持来实现双向绑定的；其中vue2.X 是 object.defineproperty 实现的defineReactive 函数；vue3.x 是proxy实现的reactivity 响应式；那么我们就来讨论下什么情况下会造成数据劫持失败~
defineproperty 的天然缺陷
作为js 早期支持的api, defineproperty 本身就是对对象已经存在key进行get，set拦截处理；当一个不存在的key加入到了已经被 defineReactive 之后的对象中，会发生什么？oh，数据的双绑失效了；然后才有了补救措施一样的 $set；
作为es6 支持的proxy 天然支持对对象的 get，set 支持；但是对本身是 基本基础类型无爱，所以又衍生出了 ref api；
言归正传，使用场景
$forceupdate 从api名字上面能够得出，这是要用于强制更新的；而强制更新的内容，正式我们的视图；什么情况下我们需要用到这个api呢？
- 当需要 $set 而因为一些原因没有使用，可以用 $forceupdate，强制更新;
- 当因为data 对象的层级过深，明明可以观测到已经有了数据变化，但是视图没有更新的时候，可以使用；
- 当数据用于展示样式的呈现时，明明样式已经挂载，但是视图就是没有生效时，可以使用；
- 当定义的数据本来就不是 双向绑定的数据，在一定操作后，想要进行数据呈现时，可以使用；
- 当你认为需要进行强制更新界面的时候，可以使用；
声明
本api $forceupdate， 适用于 vue2.x 和 vue3.x
使用方式为： this.$forceupdate() ; 此处需要组件实例，请注意 vue3.x setup 中不存在this;
网友评论