Vue中使用Cytoscape.js

Posted 2023-03-24

参考技术A 在Vue中使用一些第三方库时，很容易犯的错误是直接把第三方库的对象放在Vue的data属性中。

例如在使用 Cytoscape.js 时，用下面这种声明方式。

这样做的确是方便后面的操作，但问题是，这种对象特别大，嵌套层级很深，如下图所示，如果直接放在data里，vue的响应式机制，会监听cy的每个属性，开销巨大，CPU占用瞬间到100%。

所以在使用 Cytoscape.js 、 Echarts.js 与vue结合时，要避免直接放在data属性中。一种方法是，在 mounted() 里引入该对象。

另一种方法是用 Object.freeze()

这两个方法，都能避免vue的响应式开销，后面也能够正常操作 this.cy 对象。