限制vue/vuex反应性

Kas*_*tin 6 javascript vue.js vuex vuejs2

假设我们有一些对象数组,这些对象永远不会改变.例如,这可能是搜索结果,从谷歌地图收到地方api - 每个结果都是相当复杂的对象,包括id,标题,地址,坐标,照片和一堆其他属性和方法.

我们想使用vue/vuex在地图上显示搜索结果.如果某些新结果被推送到商店,我们想在地图上绘制他们的标记.如果删除某些结果,我们要删除其标记.但内部每一个结果都不会改变.

有没有办法告诉vue跟踪数组(推,拼接等),但不要更深入,不跟踪它的任何元素的属性?

现在我可以想象只有一些丑陋的数据分裂 - 保持id的数组在vue中并且在商店之外具有单独的cache-by-id.我正在寻找一个更优雅的解决方案(如knockout.js observableArray).

Lin*_*org 10

您可以Object.freeze()在这些对象上使用.这带来了(非常小的!)性能,但如果你不同时添加数百或数千个对象,它应该可以忽略不计.

编辑:或者,你可以冻结数组(更好的性能),这将使Vue跳过"重新"其内容.

当您需要向该数组添加对象时,构建一个新对象以替换旧数组:

state.searchResults = Object.freeze(state.searchResults.concat([item]))
Run Code Online (Sandbox Code Playgroud)

即使对于更大的阵列,这也会非常便宜.

  • 一个就足够了。当Vue遇到冻结对象时,它将跳过子对象。 (2认同)