Memory management recommendations

Memory Management Recommendations

Memory management in Vue.js applications directly impacts performance. Properly controlling component lifecycles, avoiding memory leaks, and optimizing data storage can significantly improve application smoothness. Below, we analyze common issues and solutions based on specific scenarios.

Cleanup Work During Component Destruction

Components that are not properly destroyed can lead to persistent memory usage. This commonly occurs with event listeners, timers, and third-party library instances.

// Bad example: Unremoved event listener
export default {
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      // Processing logic
    }
  }
}

// Correct approach: Clean up in beforeDestroy
export default {
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      // Processing logic
    }
  }
}

Special handling for timers:

export default {
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log('Running...')
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  }
}

Optimization for Large Datasets

Improper operations when rendering long lists can cause memory spikes. Virtual scrolling is a typical solution:

<template>
  <RecycleScroller
    class="scroller"
    :items="largeList"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">{{ item.text }}</div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
  components: { RecycleScroller },
  data() {
    return {
      largeList: [] // Contains 100,000 entries
    }
  }
}
</script>

Pagination for table data:

async loadChunk(page) {
  const chunk = await api.getLargeData({ page, size: 100 })
  this.tableData = [...this.tableData, ...chunk]
  // Keep only the last 3 pages to prevent memory bloat
  if(this.tableData.length > 300) {
    this.tableData = this.tableData.slice(-300)
  }
}

Rational Use of Reactive Data

Vue's reactivity system tracks all data changes, and improper use can increase memory overhead:

// Not recommended: Fully reactive large object
data() {
  return {
    hugeObj: { /* Contains thousands of properties */ }
  }
}

// Recommended approach 1: Freeze non-reactive parts
data() {
  return {
    hugeObj: Object.freeze({
      config: { /* Static configuration */ },
      reactiveData: { /* Reactive portion */ }
    })
  }
}

// Recommended approach 2: Non-reactive data
data() {
  this.staticData = { /* Large static data */ }
  return {
    reactivePart: { /* Reactive portion */ }
  }
}

Memory Management for Third-Party Libraries

Heavy components like chart libraries require special attention for destruction:

export default {
  data() {
    return {
      chartInstance: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const canvas = this.$refs.chartCanvas
      this.chartInstance = new HeavyChartLibrary(canvas, {
        // Configuration
      })
    },
    cleanupChart() {
      if(this.chartInstance) {
        this.chartInstance.destroy()
        this.chartInstance = null
      }
    }
  },
  beforeDestroy() {
    this.cleanupChart()
  },
  activated() {
    if(!this.chartInstance) {
      this.initChart()
    }
  },
  deactivated() {
    this.cleanupChart()
  }
}

Optimization of Image Resources

Unoptimized image resources are a common source of memory consumption:

// Lazy loading implementation
<template>
  <img v-lazy="imageUrl" alt="">
</template>

<script>
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: 'placeholder.jpg',
  attempt: 3
})
</script>

// Memory-releasing image component
export default {
  props: ['src'],
  data() {
    return {
      isVisible: false
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      this.isVisible = entries[0].isIntersecting
    })
    observer.observe(this.$el)
    this.$once('hook:beforeDestroy', () => {
      observer.disconnect()
    })
  },
  render(h) {
    return this.isVisible ? h('img', { attrs: { src: this.src } }) : h('div')
  }
}

Memory Considerations for State Management

Optimization strategies for large state trees in Vuex:

// Modular segmentation of large states
const store = new Vuex.Store({
  modules: {
    user: {
      namespaced: true,
      state: () => ({
        profile: null,
        preferences: {}
      }),
      mutations: {
        clearProfile(state) {
          state.profile = null
        }
      }
    },
    product: productModule
  }
})

// Dynamic module registration/unregistration
export default {
  created() {
    this.$store.registerModule('tempModule', tempModule)
  },
  destroyed() {
    this.$store.unregisterModule('tempModule')
  }
}

Memory Leaks Caused by Closures

Closure traps in event handlers:

// Problematic code
export default {
  methods: {
    setupLeak() {
      const hugeData = new Array(1000000).fill('data')
      document.addEventListener('click', () => {
        console.log(hugeData.length) // Closure retains reference to hugeData
      })
    }
  }
}

// Solution
export default {
  methods: {
    setupSafe() {
      const handler = () => {
        const hugeData = new Array(1000000).fill('data')
        console.log(hugeData.length)
        // Dereference immediately after use
        hugeData.length = 0
      }
      document.addEventListener('click', handler)
      this.$once('hook:beforeDestroy', () => {
        document.removeEventListener('click', handler)
      })
    }
  }
}

Memory Reclamation for Dynamic Components

Rational use of keep-alive components:

<template>
  <div>
    <button @click="current = 'A'">Show A</button>
    <button @click="current = 'B'">Show B</button>
    
    <keep-alive :max="3" :exclude="['ComponentC']">
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 'A'
    }
  },
  computed: {
    currentComponent() {
      return `Component${this.current}`
    }
  }
}
</script>

Handling Intensive Tasks with Web Workers

Moving CPU-intensive tasks out of the main thread:

// worker.js
self.onmessage = function(e) {
  const result = heavyComputation(e.data)
  self.postMessage(result)
}

// Usage in components
export default {
  data() {
    return {
      worker: null
    }
  },
  created() {
    this.worker = new Worker('./worker.js')
    this.worker.onmessage = (e) => {
      this.processResult(e.data)
    }
  },
  methods: {
    startCalculation() {
      this.worker.postMessage(this.inputData)
    }
  },
  beforeDestroy() {
    this.worker.terminate()
  }
}