Vue.js中使用vis network出现的点和线更新问题
发现问题有一段时间，中文网一直没搜到结果，最终还是在github的已关闭issue里翻出了历史答案，简单翻译其中回答的部分内容，记录如下。
1.环境
前端工程vue.js，版本2.6.11。
vis-network版本5.4.1，在data()中定义全局变量network，初始化如下。
this.network = new vis.network(document.getElementById(‘graph’), network_data, network_options)2.问题
用network的方法update和setData批量更新edge背景色，更新的是数组中最后一个元素的color。
3.解决
将全局network对象从data()中移出来，例如：
export default{
data() {
return { }
},
// Static data
// You can access to this variable like this this.$options.graph in your code.
network: null,
} 调用方法：
this.$options.network = new vis.Network(document.getElementById('graph'), network_data, network_options)4.原因
1）vue.js对所有对象的成员变量添加代理，包括getters和setters
比如处理background color，在默认options里，color定义如下。
color: {
border: '#2B7CE9',
background: '#97C2FC',
highlight: {
border: '#2B7CE9',
background: '#D2E5FF'
},
hover: {
border: '#2B7CE9',
background: '#D2E5FF'
}
}vue.js在处理它时会发生变化，在chrome console里可以看到对象结构。
2）vis.js的network使用了options的原型链
不是复制network中每个元素的所有选项，network而是设置更多的全局选项作为更多特定选项的原型。
比如，对于一个给定的node，原型链是
node options -> group options -> application options -> default options
3）不使用vue.js创建options
当一个node被创建时，这个node的options对象也会被创建，该对象是局部对象，原型设置为所有node的全局options对象，如下所示。
当node options对象中的属性background被赋值时，只会在局部变量中赋值，原型对象中的值不会更改。
4）使用vue.js创建options时
默认options会有代理属性，get和set函数，创建node的关联options对象如下所示
给node设置background-color，根据2）中的原型链，回找到原型对象，调用原型对象background的setter，结果就是导致所有node都会设置相同color。
。
5）结论
a.最有效方法是从vue.js的data()方法中移出options，阻止给所有options变量添加接口。
b.原型链是在javascript中完全有效的构造，vis.js使用原型链不是问题，问题是vue.js不能处理它。
c.想让vis.js在vue.js里正常作用，需要遵守vue.js关于变量调用的规则。
总之就是，不推荐将含有原型继承的复杂对象放在Vue的data定义中，并且让他们重复使用。
最后附上链接，先翻到的问题
https://github.com/visjs/vis-network/issues/173
后追溯的历史问题
https://github.com/almende/vis/issues/2567
相关问题
https://github.com/almende/vis/issues/2524
https://github.com/almende/vis/issues/3060
https://github.com/vuejs/vue/issues/4622