221. 踩坑：vue array push 导致的内存泄漏

[ly525]

{{ arr }}
<v-btn @click.native="add">add</v-btn> 
<v-btn @click.native="change">change</v-btn>

data () {
 return {
  arr: [],
 },
},
methods: {
  add () {
    this.arr.push({
      a: 10,
    });
  },
  change () {
    this.arr[0]['a'] = 100;
  }
}

在 Chrome devtool 中使用 source 查看 vue.js 中的 walk 函数，会发现add 里面push 进去的 a 会被walk，然后被watch，导致内存狂涨

总结

在vue 中，除非需要在template 中更新的变量，否则一般情况下不要声明在 data 中，可以定义在模块内变量或者声明该变量不触发 vue 的响应式更新。