如何利用 Vue 的生命周期钩子进行初始化和清理操作？

一、初始化操作的核心钩子

1. created（选项式API）

export default {
  data() {
    return { user: null };
  },
  created() {
    // 适合初始化数据、发起非DOM操作请求
    this.fetchUser();
  },
  methods: {
    async fetchUser() {
      const response = await fetch('/api/user');
      this.user = await response.json();
    }
  }
};

2. onMounted（组合式API）

import { onMounted, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const element = ref(null);

    onMounted(() => {
      // DOM已挂载，可安全操作
      element.value = document.getElementById('counter');
      element.value.addEventListener('click', increment);
    });

    function increment() {
      count.value++;
    }

    // 必须返回响应式数据
    return { count };
  }
};

二、清理操作的核心钩子

1. beforeUnmount（组合式API）

import { onBeforeUnmount } from 'vue';

export default {
  setup() {
    let timer = null;

    onBeforeUnmount(() => {
      // 组件销毁前清理资源
      clearInterval(timer);
      timer = null;
    });

    // 其他逻辑...
  }
};

2. unmounted（选项式API）

export default {
  data() {
    return { socket: null };
  },
  created() {
    this.socket = new WebSocket('ws://example.com');
  },
  unmounted() {
    // 确保WebSocket连接关闭
    if (this.socket) {
      this.socket.close();
    }
  }
};

三、组合式API与选项式API的生命周期映射

四、日常开发建议

1. 数据请求策略

// 推荐：created中发起请求，避免阻塞渲染
created() {
  this.loadData();
},
methods: {
  async loadData() {
    try {
      this.data = await fetchData();
    } catch (error) {
      console.error('数据加载失败:', error);
    }
  }
}

2. DOM操作规范

// 错误示例：在created中操作未挂载的DOM
created() {
  this.$refs.container.style.color = 'red'; // this.$refs为null
}

// 正确示例：在mounted中操作
mounted() {
  this.$refs.container.style.color = 'red';
}

3. 资源清理守则

// 必须成对出现：添加/移除事件监听
mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

五、实战注意事项

1. 父子组件生命周期顺序

父 beforeMount -> 子 beforeMount -> 子 mounted -> 父 mounted
父 beforeUnmount -> 子 beforeUnmount -> 子 unmounted -> 父 unmounted

2. 异步操作处理

// 错误示例：未处理异步清理
onMounted(() => {
  this.timer = setInterval(() => {}, 1000);
});

// 正确示例：使用异步清理
onMounted(async () => {
  const data = await longRunningTask();
  this.data = data;
  this.cleanup = () => clearInterval(this.timer);
});

onBeforeUnmount(() => {
  if (this.cleanup) this.cleanup();
});

3. 服务端渲染（SSR）兼容

// 避免在beforeMount中执行DOM操作
onBeforeMount(() => {
  if (typeof window !== 'undefined') {
    // 仅在客户端执行
    this.initChart();
  }
});

六、典型错误案例分析

1. 忘记清理定时器

mounted() {
  this.timer = setInterval(() => {}, 1000); // ❌ 未清理
}

2. 在beforeDestroy中执行复杂计算

beforeDestroy() {
  // ❌ 阻塞销毁流程
  this.heavyComputation();
}

七、最佳实践总结

1. 初始化顺序：created（数据）→ mounted（DOM）
2. 清理原则：谁创建谁销毁，成对出现
3. 性能优化：避免在mounted中进行重计算
4. 错误边界：使用errorCaptured钩子捕获子组件错误
5. 状态管理：结合Vuex/Pinia时，优先在created中初始化状态

通过合理运用生命周期钩子，开发者可以实现组件生命周期的精细控制。在实际开发中，建议结合TypeScript的类型系统增强生命周期钩子的类型安全，并利用Vue Devtools进行生命周期调试。