让 Vue 在反应性行走期间忽略对象？

Question

有没有办法让 vue ignore/exclude 从它的“反应性行走”中成为一个对象？

我们有一个 vue 应用程序控制 google 地图多段线的编辑器，我注意到当它首次安装时，页面性能受到巨大影响（即每次安装冻结 6 秒）。我可以在 firefox 性能选项卡中看到大部分时间由 we.prototype.walk 在 vue.min.js 中花费，我认为这是 vue 使 google 映射对象反应并停止页面，因为它尺寸。

因此我想将地图对象标记为被 vue“忽略”，因为 component/app 不需要访问它，有没有办法做到这一点？

我们的结构类似于：

Component.vue

<template>...</template>
<script>
    ...vue_stuff,
    props: ["tool"] // <--- This ìs the "editor" object

Editor.js

class Editor{
    constructor(map, line){
        this.map = map; // <--- This is the google maps object 
        this.line = line; // <--- This is the Polyline object, the editor must have access to this
                          // The line also contains a reference to the map, 
                          // so it is no use to remove it from the object
        this.undoStack = []; // <--- The vue component must have access to this + functions
        // ...
    }
}

Answer 1

这应该从地图中移除反应性属性:

this["map"] = map;

Answer 2

我通过向地图对象添加一个虚拟观察者来解决我的问题，灵感来自/从 https://github.com/rpkilby/vue-nonreactive 窃取。这使得 vue “相信”它已经扫描了对象，因此忽略了它。

地图对象初始化后，我用

创建虚拟观察者

map.__ob__ = new (new Vue()).$data.__ob__.constructor({})

让 Vue 在反应性行走期间忽略对象？

Make vue ignore objects during reactivity walk?

performance

vue.js

vuejs2

vue-reactivity