vue.js - 更新 Vuex 状态对象并将项目作为道具传递给子组件正在增加内存

Question

我整天都在盯着堆快照，但我无法解决这个问题。

当我将 vuex 状态对象项传递给子组件时，内存不断增加并且不会被 gc'd。但是，如果我使用父组件中的数据，那就没问题了。

我的 vuex 状态对象项值每秒更新一次。

这是我的父组件的示例：

<template>
  <div>
    <child-item v-for="(item, i) in list" :key="i" :value="item"></child-item>
    <!-- this works fine and memory is released <div>{{ item }}</div> -->
  </div>
</template>

<script>
  export default {
    name: 'List',
    computed: {
      list() {
        return this.$store.state.list // vuex object with items updating every second
      }
    }
  }
</script>

这是我的子组件的示例：

<template>
  <div>
    {{ value }}
  </div>
</template>

<script>
  export default {
    name: 'Item',
    props: ['value']
  }
</script>

有谁知道为什么会这样？

标签： vue.jsmemory-leaksvuexvue-props