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)
即使对于更大的阵列,这也会非常便宜.
| 归档时间: |
|
| 查看次数: |
3208 次 |
| 最近记录: |