Vue2主动屏蔽响应式

在用Vue开发项目时,有时候希望Vue的响应式系统能忽略掉一些特定对象,特别是一些数据量比较大的对象,比如地图实例,如果变成响应式对象会极大地降低地图的性能。经测试发现会降低70%甚至更多。

自己一个人开发还好,只要注意不赋值给响应式变量(data选项中定义的变量)即可,但多人合作时,难免每个人任何时候都不出错,一旦一个地方没注意,整个地图实例都会被改为响应式对象。

以前也查过资料、看过源码,都没有在Vue2中找到比较好的方法来处理这个屏蔽响应式的问题。(Vue3中通过 markRaw 或者 shallowReactive、shallowRef 来处理对象即可。)

最近因为开发一个公共的地图工具,而工具使用方刚好就是用 Vue 开发的项目,于是又研究起了这个问题,我希望工具这边能主动屏蔽响应式,降低使用者的心智负担。

在查源码,有了惊喜发现,Vue2.7 因为回迁了Vue3的一些特性,让Vue2也支持了主动屏蔽响应式,方法很简单,只需要给对象增加一个真值属性 __v_skip 即可,支持[email protected]+。

赶快用起来吧~~