一文详解Vue中内存泄漏的场景与预防技巧

export default {
  created() {
    this.timer = setInterval(() => {
      console.log('This is a repeating task');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};

export default {
  mounted() {
    this.handleResize = this.onResize.bind(this);
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    onResize() {
      console.log('Window resized');
    }
  }
};

const store = new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    clearUser(state) {
      state.user = null;
    }
  }
});

export default {
  mounted() {
    this.$refs.myElement.textContent = 'Hi there!';
  },
  beforeDestroy() {
    this.$refs.myElement = null;
  }
};

export default {
  created() {
    this.someFunction = () => {
      console.log(this.someData); // `this` 引用了组件实例
    }
  },
  beforeDestroy() {
    this.someFunction = null; // 清理引用
  }
};

export default {
  created() {
    // 在组件创建时进行初始化操作
  },
  mounted() {
    // 组件挂载后，进行 DOM 操作或事件监听
  },
  beforeDestroy() {
    // 在组件销毁前清理定时器和事件监听器
  }
};

const vm = new Vue({
  data: {
    message: 'Hello Vue!'
  }
});
vm.$destroy();

Vue.directive('resize', {
  bind(el, binding) {
    el.handleResize = () => {
      console.log('Element resized');
    }
    window.addEventListener('resize', el.handleResize);
  },
  unbind(el) {
    window.removeEventListener('resize', el.handleResize);
  }
});

export default {
  data() {
    return {
      intervalId: null
    };
  },
  methods: {
    startTimer() {
      this.intervalId = setInterval(() => {
        console.log('Timer running');
      }, 1000);
    }
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.intervalId);
    next();
  },
  mounted() {
    this.startTimer();
  }
};

const weakMap = new WeakMap();
let obj = {};

weakMap.set(obj, 'some value');
console.log(weakMap.has(obj)); // true

obj = null; // 删除对象的引用
// 由于是弱引用，obj 会被自动回收

<!-- 使用 v-if 只在需要时渲染 -->
<div v-if="isVisible">This is conditionally rendered</div>

<!-- 使用 v-show 只是隐藏和显示 -->
<div v-show="isVisible">This is conditionally shown</div>

// 避免这样做
window.myGlobalVar = 'This can cause memory leaks';

// 使用 Vuex 或 Composition API
const store = new Vuex.Store({
  state: {
    myVar: 'This is safer'
  }
});

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

export default {
  data() {
    return {
      intervalId: null,
      eventHandler: null,
      fetchData: null
    };
  },
  created() {
    this.startInterval();
    this.addEventListeners();
    this.fetchData = this.loadData();
  },
  methods: {
    startInterval() {
      this.intervalId = setInterval(() => {
        console.log('Interval running');
      }, 1000);
    },
    addEventListeners() {
      this.eventHandler = this.handleEvent.bind(this);
      window.addEventListener('resize', this.eventHandler);
    },
    handleEvent() {
      console.log('Window');
    },
    async loadData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Failed to fetch data', error);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
    window.removeEventListener('resize', this.eventHandler);
    this.fetchData = null;
  }
};