Vue生命周期详解：从创建到销毁的全过程

1. Vue 生命周期概述

Vue 生命周期是每个 Vue 开发者必须掌握的核心概念。简单来说，它描述了 Vue 组件从创建到销毁的完整过程。在这个过程中，Vue 提供了一系列的"钩子函数"，让我们可以在特定阶段插入自己的逻辑代码。

理解生命周期的重要性体现在几个方面：

• 它决定了我们代码的执行时机
• 帮助我们避免常见的内存泄漏问题
• 让我们能够在正确的时间点执行特定操作
• 是优化组件性能的基础

2. Vue 2 与 Vue 3 生命周期对比

2.1 主要变化

Vue 3 在生命周期方面做了一些调整，主要是为了更准确地反映组件的实际状态：

2.2 变化背后的原因

Vue 3 将"destroy"改为"unmount"主要是为了：

1. 更准确地描述组件状态：组件实际上是从DOM中卸载(unmount)，而不是被销毁(destroy)
2. 与React等框架的术语保持一致，降低学习成本
3. 更符合虚拟DOM的工作机制

3. 生命周期钩子详解

3.1 beforeCreate

javascript复制export default {
  beforeCreate() {
    console.log('beforeCreate 钩子被调用');
    // 此时无法访问data和methods
    console.log(this.message); // undefined
    console.log(this.sayHello); // undefined
  },
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  }
}

关键点：

• 组件实例刚被创建
• data和methods还未初始化
• 适合做一些与组件无关的初始化工作

实际应用场景：

• 性能监控的埋点
• 非响应式数据的初始化
• 插件的一些初始化工作

3.2 created

javascript复制export default {
  data() {
    return {
      posts: [],
      loading: false
    }
  },
  created() {
    console.log('created 钩子被调用');
    // 可以访问data和methods了
    console.log(this.message); // 'Hello Vue'
    this.sayHello(); // 可以调用方法
    
    // 常见的使用场景：发起API请求
    this.fetchPosts();
  },
  methods: {
    async fetchPosts() {
      this.loading = true;
      try {
        const response = await fetch('/api/posts');
        this.posts = await response.json();
      } catch (error) {
        console.error('获取数据失败:', error);
      } finally {
        this.loading = false;
      }
    }
  }
}

关键点：

• 实例已完成数据观测
• 可以访问data和methods
• 模板和虚拟DOM还未生成
• 无法操作DOM

最佳实践：

• 这是发起初始数据请求的最佳时机
• 适合初始化组件状态
• 可以进行数据预处理

3.3 beforeMount

javascript复制export default {
  beforeMount() {
    console.log('beforeMount 钩子被调用');
    // 模板已编译但还未挂载
    console.log(this.$el); // undefined
    
    // $refs还不存在
    console.log(this.$refs.myElement); // undefined
  }
}

关键点：

• 模板编译完成，生成render函数
• 还未创建真实DOM节点
• 很少需要在这个钩子中添加逻辑

3.4 mounted

javascript复制export default {
  mounted() {
    console.log('mounted 钩子被调用');
    // 可以访问DOM了
    console.log(this.$el); // 真实的DOM元素
    console.log(this.$refs.myElement); // 引用的DOM元素
    
    // 初始化第三方库
    this.initChart();
    
    // 添加事件监听
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.chart.setOption({
        // 图表配置
      });
    },
    handleResize() {
      this.chart.resize();
    }
  }
}

关键点：

• 组件已挂载到DOM
• 可以安全地操作DOM
• 可以访问子组件

常见用途：

• 初始化需要DOM的第三方库（如ECharts、Swiper）
• 执行DOM操作
• 添加事件监听器
• 发起需要DOM的请求

3.5 beforeUpdate

javascript复制export default {
  data() {
    return {
      count: 0
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate 钩子被调用');
    // 可以获取更新前的DOM状态
    const oldValue = this.$refs.counter.textContent;
    console.log('旧值:', oldValue);
    
    // 危险操作：可能导致无限循环
    // this.count++; // 不要这样做！
  }
}

关键点：

• 数据变化后，DOM更新前触发
• 可以获取更新前的DOM状态
• 避免在这个钩子中修改响应式数据

使用场景：

• 在DOM更新前保存一些状态
• 与updated配合进行性能优化

3.6 updated

javascript复制export default {
  data() {
    return {
      items: []
    }
  },
  updated() {
    console.log('updated 钩子被调用');
    // DOM已经更新
    console.log('新值:', this.$refs.list.innerHTML);
    
    // 可以基于新DOM进行操作
    this.adjustLayout();
  },
  methods: {
    adjustLayout() {
      // 根据新的DOM状态调整布局
    }
  }
}

关键点：

• DOM更新完成后触发
• 可以操作更新后的DOM
• 避免修改响应式数据（会导致无限循环）

注意事项：

• 不要在这个钩子中修改依赖的数据
• 对于复杂的DOM操作，考虑使用nextTick

3.7 beforeUnmount (Vue 3) / beforeDestroy (Vue 2)

javascript复制export default {
  data() {
    return {
      timer: null,
      socket: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log('定时器运行中...');
    }, 1000);
    
    this.socket = new WebSocket('ws://example.com');
    this.socket.onmessage = (event) => {
      console.log('收到消息:', event.data);
    };
  },
  beforeUnmount() {
    console.log('beforeUnmount 钩子被调用');
    
    // 清除定时器
    clearInterval(this.timer);
    this.timer = null;
    
    // 关闭WebSocket连接
    if (this.socket) {
      this.socket.close();
      this.socket = null;
    }
    
    // 移除事件监听
    window.removeEventListener('resize', this.handleResize);
    
    // 取消未完成的请求
    if (this.controller) {
      this.controller.abort();
    }
  }
}

关键点：

• 组件即将卸载但DOM还存在
• 必须进行清理工作
• 最后一个可以访问组件实例的时机

必须清理的资源：

• 定时器
• 事件监听
• WebSocket连接
• 未完成的网络请求
• 第三方库实例

3.8 unmounted (Vue 3) / destroyed (Vue 2)

javascript复制export default {
  unmounted() {
    console.log('unmounted 钩子被调用');
    // 理论上不应该再访问DOM
    // 但某些情况下可能还能访问到
    
    // 最后的清理工作
    this.cleanup();
  },
  methods: {
    cleanup() {
      // 执行最终的清理
    }
  }
}

关键点：

• 组件已卸载，DOM已移除
• 很少需要在这个钩子中添加逻辑
• 主要用于调试

4. Composition API 中的生命周期

Vue 3 的 Composition API 提供了新的方式来使用生命周期钩子：

javascript复制<script setup>
import { 
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue';

// setup 相当于 beforeCreate + created
const count = ref(0);

onBeforeMount(() => {
  console.log('onBeforeMount');
});

onMounted(() => {
  console.log('onMounted');
  // 初始化图表
  const chart = echarts.init(document.getElementById('chart'));
});

onBeforeUpdate(() => {
  console.log('onBeforeUpdate');
});

onUpdated(() => {
  console.log('onUpdated');
});

onBeforeUnmount(() => {
  console.log('onBeforeUnmount');
  // 清理工作
});

onUnmounted(() => {
  console.log('onUnmounted');
});
</script>

对比表：

优势：

• 更灵活的组织方式
• 更好的代码复用
• 更清晰的逻辑分组

5. 实际应用场景

5.1 数据获取策略

javascript复制export default {
  data() {
    return {
      user: null,
      posts: [],
      loading: false,
      error: null
    }
  },
  async created() {
    // 并行请求
    await Promise.all([
      this.fetchUser(),
      this.fetchPosts()
    ]);
  },
  methods: {
    async fetchUser() {
      this.loading = true;
      try {
        const response = await fetch('/api/user');
        this.user = await response.json();
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },
    async fetchPosts() {
      try {
        const response = await fetch('/api/posts');
        this.posts = await response.json();
      } catch (err) {
        console.error('获取帖子失败:', err);
      }
    }
  }
}

最佳实践：

• 在created中发起初始请求
• 处理加载状态和错误状态
• 考虑请求的并行与串行
• 对于需要DOM的请求，使用mounted

5.2 第三方库集成

javascript复制export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new AMap.Map('map-container', {
        zoom: 13,
        center: [116.397428, 39.90923]
      });
      
      // 添加控件
      this.map.addControl(new AMap.ToolBar());
      
      // 添加事件
      this.map.on('click', (e) => {
        console.log('点击位置:', e.lnglat);
      });
    }
  },
  beforeUnmount() {
    // 销毁地图实例
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
  }
}

关键点：

• 在mounted中初始化需要DOM的库
• 在beforeUnmount中清理资源
• 注意事件监听的移除
• 考虑使用插件或自定义指令封装常用库

5.3 性能优化技巧

javascript复制export default {
  data() {
    return {
      largeList: [],
      visibleItems: 50
    }
  },
  created() {
    // 初始只加载部分数据
    this.fetchPartialData();
  },
  mounted() {
    // 滚动加载更多
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    async fetchPartialData() {
      const response = await fetch('/api/large-list');
      this.largeList = await response.json();
    },
    handleScroll() {
      const nearBottom = window.innerHeight + window.scrollY >= 
                        document.body.offsetHeight - 500;
      if (nearBottom && this.visibleItems < this.largeList.length) {
        this.visibleItems += 20;
      }
    }
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}

优化策略：

• 分页或懒加载大数据集
• 使用v-if替代v-show控制DOM渲染
• 合理使用keep-alive缓存组件
• 避免在updated中执行重操作
• 使用debounce或throttle处理频繁事件

6. 常见问题与解决方案

6.1 内存泄漏问题

常见泄漏场景：

1. 未清除的定时器
2. 未移除的事件监听
3. 未关闭的WebSocket连接
4. 未取消的API请求
5. 未清理的第三方库实例

解决方案：

javascript复制export default {
  data() {
    return {
      timer: null,
      socket: null,
      controller: null
    }
  },
  mounted() {
    // 设置定时器
    this.timer = setInterval(() => {
      console.log('定时器运行中...');
    }, 1000);
    
    // 建立WebSocket连接
    this.socket = new WebSocket('ws://example.com');
    
    // 发起可取消的请求
    this.controller = new AbortController();
    fetch('/api/data', {
      signal: this.controller.signal
    });
  },
  beforeUnmount() {
    // 清除定时器
    clearInterval(this.timer);
    this.timer = null;
    
    // 关闭WebSocket
    if (this.socket) {
      this.socket.close();
      this.socket = null;
    }
    
    // 取消请求
    if (this.controller) {
      this.controller.abort();
      this.controller = null;
    }
  }
}

6.2 无限更新循环

问题代码：

javascript复制export default {
  data() {
    return {
      count: 0
    }
  },
  updated() {
    // 错误：会导致无限循环
    this.count++;
  }
}

解决方案：

javascript复制export default {
  data() {
    return {
      count: 0,
      needsUpdate: false
    }
  },
  watch: {
    count(newVal, oldVal) {
      if (this.needsUpdate) {
        this.doSomething();
        this.needsUpdate = false;
      }
    }
  },
  methods: {
    updateCount() {
      this.count++;
      this.needsUpdate = true;
    },
    doSomething() {
      // 执行需要的操作
    }
  }
}

6.3 父子组件生命周期顺序

创建阶段顺序：

1. 父beforeCreate
2. 父created
3. 父beforeMount
4. 子beforeCreate
5. 子created
6. 子beforeMount
7. 子mounted
8. 父mounted

更新阶段顺序：

1. 父beforeUpdate
2. 子beforeUpdate
3. 子updated
4. 父updated

销毁阶段顺序：

1. 父beforeUnmount
2. 子beforeUnmount
3. 子unmounted
4. 父unmounted

7. Keep-alive 与生命周期

7.1 缓存组件生命周期

javascript复制export default {
  activated() {
    console.log('组件被激活');
    // 从缓存中恢复时调用
    this.refreshData();
  },
  deactivated() {
    console.log('组件被停用');
    // 被缓存时调用
    this.saveState();
  },
  methods: {
    refreshData() {
      // 刷新数据
    },
    saveState() {
      // 保存状态
    }
  }
}

使用场景：

• 保留表单数据
• 记住滚动位置
• 缓存复杂计算结果
• 避免重复渲染开销大的组件

7.2 配合路由使用

javascript复制const routes = [
  {
    path: '/user/:id',
    component: UserDetail,
    meta: { keepAlive: true }
  }
];

// 父组件
<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" v-if="$route.meta.keepAlive" />
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive" />
  </router-view>
</template>

8. 高级技巧与最佳实践

8.1 生命周期钩子的异步使用

javascript复制export default {
  async created() {
    // 可以安全地使用async/await
    this.user = await fetchUser();
    this.posts = await fetchPosts();
  },
  async mounted() {
    // 等待数据加载后再初始化图表
    await this.$nextTick();
    this.initChart();
  }
}

8.2 多个同类钩子的执行顺序

javascript复制export default {
  created() {
    console.log('第一个created钩子');
  },
  created() {
    console.log('第二个created钩子');
  }
}
// 输出顺序：
// 第一个created钩子
// 第二个created钩子

8.3 混入(Mixin)中的生命周期

javascript复制const myMixin = {
  created() {
    console.log('来自mixin的created钩子');
  }
};

export default {
  mixins: [myMixin],
  created() {
    console.log('组件自身的created钩子');
  }
}
// 输出顺序：
// 来自mixin的created钩子
// 组件自身的created钩子

8.4 错误处理

javascript复制export default {
  errorCaptured(err, vm, info) {
    console.error('捕获到错误:', err);
    console.log('发生错误的组件:', vm);
    console.log('错误信息:', info);
    
    // 可以阻止错误继续向上传播
    return false;
  },
  mounted() {
    // 模拟错误
    this.undefinedMethod();
  }
}

9. 性能优化与生命周期

9.1 合理使用v-once

javascript复制<template>
  <div v-once>
    <!-- 这个div及其子组件只会渲染一次 -->
    <StaticComponent />
  </div>
</template>

9.2 懒加载组件

javascript复制const LazyComponent = () => import('./LazyComponent.vue');

export default {
  components: {
    LazyComponent
  }
}

9.3 使用defer属性

javascript复制export default {
  mounted() {
    // 延迟执行非关键初始化
    setTimeout(() => {
      this.initSecondaryFeatures();
    }, 0);
  }
}

10. 测试生命周期钩子

10.1 单元测试示例

javascript复制import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('调用created钩子时发起请求', () => {
    const fetchData = jest.fn();
    mount(MyComponent, {
      methods: { fetchData }
    });
    expect(fetchData).toHaveBeenCalled();
  });
  
  it('在beforeUnmount中清理资源', async () => {
    const wrapper = mount(MyComponent);
    const clearResources = jest.spyOn(wrapper.vm, 'clearResources');
    await wrapper.unmount();
    expect(clearResources).toHaveBeenCalled();
  });
});

11. 生命周期可视化工具

11.1 Vue DevTools

Vue DevTools提供了生命周期钩子的可视化展示：

• 可以查看每个钩子的触发时间
• 查看组件树的生命周期状态
• 调试keep-alive组件的激活状态

11.2 自定义日志

javascript复制export default {
  created() {
    this.$log('created');
  },
  mounted() {
    this.$log('mounted');
  },
  methods: {
    $log(hookName) {
      console.log(`[${this.$options.name}] ${hookName} 钩子被调用`);
    }
  }
}

12. 与其他框架的生命周期对比

12.1 React 对比

12.2 Angular 对比

13. 生命周期钩子的TypeScript支持

13.1 类型定义

typescript复制import { defineComponent } from 'vue';

export default defineComponent({
  beforeCreate() {
    // 类型安全的钩子
  },
  created() {
    this.fetchData(); // 方法调用有类型检查
  },
  methods: {
    fetchData(): Promise<void> {
      return fetch('/api/data').then(res => res.json());
    }
  }
});

13.2 Composition API类型

typescript复制<script setup lang="ts">
import { onMounted, ref } from 'vue';

const count = ref(0);

onMounted(() => {
  console.log(count.value); // 类型推断为number
});
</script>

14. 生命周期与状态管理

14.1 与Pinia/Vuex配合

javascript复制export default {
  created() {
    // 初始化store
    this.$store.dispatch('initData');
  },
  mounted() {
    // 订阅store变化
    this.unsubscribe = this.$store.subscribe((mutation, state) => {
      console.log('store变化:', mutation.type);
    });
  },
  beforeUnmount() {
    // 取消订阅
    this.unsubscribe();
  }
}

15. 生命周期与SSR

15.1 服务端生命周期

在SSR中，只有beforeCreate和created会在服务端执行：

• 避免在beforeCreate和created中使用浏览器特有的API
• 将DOM相关操作放在mounted中
• 使用process.client检查运行环境

javascript复制export default {
  created() {
    if (process.client) {
      // 只在客户端执行的代码
    }
  }
}

16. 生命周期与TypeScript装饰器

16.1 使用vue-property-decorator

typescript复制import { Vue, Component } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  beforeCreate() {
    console.log('beforeCreate');
  }
  
  created() {
    console.log('created');
  }
}

17. 生命周期与自定义指令

17.1 指令生命周期

javascript复制export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      },
      updated(el) {
        el.focus();
      }
    }
  }
}

18. 生命周期与过渡动画

18.1 过渡钩子

javascript复制export default {
  beforeEnter(el) {
    // 进入过渡前
  },
  enter(el, done) {
    // 进入过渡
    done(); // 过渡完成
  },
  afterEnter(el) {
    // 进入过渡后
  }
}

19. 生命周期与错误处理

19.1 全局错误处理

javascript复制app.config.errorHandler = (err, vm, info) => {
  console.error('全局错误:', err);
  console.log('发生错误的组件:', vm);
  console.log('错误信息:', info);
};

20. 生命周期与性能监控

20.1 性能埋点

javascript复制export default {
  created() {
    this.$perf.start('component-init');
  },
  mounted() {
    this.$perf.end('component-init');
    this.$perf.measure('组件初始化', 'component-init');
  }
}

21. 生命周期与微前端

21.1 微应用生命周期

javascript复制export default {
  beforeCreate() {
    // 注册微应用
    registerMicroApp({
      name: 'my-app',
      activeRule: '/my-app',
      container: '#app',
      props: { /* ... */ }
    });
  },
  beforeUnmount() {
    // 卸载微应用
    unregisterMicroApp('my-app');
  }
}

22. 生命周期与Web Workers

22.1 Worker通信

javascript复制export default {
  data() {
    return {
      worker: null
    }
  },
  created() {
    this.worker = new Worker('./worker.js');
    this.worker.onmessage = (e) => {
      console.log('收到worker消息:', e.data);
    };
  },
  beforeUnmount() {
    this.worker.terminate();
  }
}

23. 生命周期与Web Components

23.1 自定义元素生命周期

javascript复制export default {
  mounted() {
    class MyElement extends HTMLElement {
      connectedCallback() {
        console.log('元素被添加到DOM');
      }
      disconnectedCallback() {
        console.log('元素从DOM移除');
      }
    }
    customElements.define('my-element', MyElement);
  }
}

24. 生命周期与响应式原理

24.1 响应式初始化时机

javascript复制export default {
  beforeCreate() {
    // 此时还没有响应式数据
    console.log(this.$data); // undefined
  },
  created() {
    // 数据已变为响应式
    console.log(this.$data); // 响应式对象
  }
}

25. 生命周期与渲染函数

25.1 渲染函数中的生命周期

javascript复制export default {
  render() {
    // 在渲染函数中可以访问生命周期状态
    return h('div', this.$el ? '已挂载' : '未挂载');
  }
}

26. 生命周期与动态组件

26.1 动态组件切换

javascript复制export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' 
        ? 'ComponentB' 
        : 'ComponentA';
    }
  },
  watch: {
    currentComponent(newVal, oldVal) {
      console.log(`组件从 ${oldVal} 切换到 ${newVal}`);
    }
  }
}

27. 生命周期与函数式组件

27.1 函数式组件生命周期

javascript复制export default {
  functional: true,
  render(_, { parent }) {
    // 函数式组件没有实例，生命周期有限
    console.log('函数式组件渲染');
    return h('div', '函数式组件');
  }
}

28. 生命周期与作用域插槽

28.1 插槽内容生命周期

javascript复制export default {
  mounted() {
    console.log('父组件mounted');
  },
  render() {
    return h(Child, null, {
      default: () => {
        console.log('插槽内容渲染');
        return h('div', '插槽内容');
      }
    });
  }
}

29. 生命周期与异步组件

29.1 异步组件生命周期

javascript复制const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
});

export default {
  components: {
    AsyncComponent
  }
}

30. 生命周期与Teleport

30.1 Teleport组件生命周期

javascript复制export default {
  mounted() {
    console.log('组件已挂载');
  },
  render() {
    return h(Teleport, { to: 'body' }, [
      h('div', '被传送的内容')
    ]);
  }
}

31. 生命周期与Suspense

31.1 Suspense生命周期

javascript复制export default {
  components: {
    AsyncComponent: defineAsyncComponent(() => import('./AsyncComponent.vue'))
  },
  setup() {
    onMounted(() => {
      console.log('父组件mounted');
    });
  }
}

32. 生命周期与provide/inject

32.1 注入生命周期

javascript复制export default {
  provide() {
    return {
      parentData: this.parentData
    };
  },
  data() {
    return {
      parentData: '父组件数据'
    };
  },
  created() {
    console.log('父组件provide数据');
  }
}

33. 生命周期与自定义事件

33.1 事件生命周期

javascript复制export default {
  mounted() {
    this.$emit('mounted');
  },
  beforeUnmount() {
    this.$emit('before-unmount');
  }
}

34. 生命周期与v-model

34.1 双向绑定生命周期

javascript复制export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  created() {
    console.log('初始值:', this.modelValue);
  },
  watch: {
    modelValue(newVal) {
      console.log('值变化:', newVal);
    }
  }
}

35. 生命周期与动态路由

35.1 路由参数变化

javascript复制export default {
  watch: {
    '$route'(to, from) {
      if (to.params.id !== from.params.id) {
        this.fetchData(to.params.id);
      }
    }
  },
  methods: {
    fetchData(id) {
      // 获取新数据
    }
  }
}

36. 生命周期与导航守卫

36.1 组件内守卫

javascript复制export default {
  beforeRouteEnter(to, from, next) {
    // 不能访问this
    next(vm => {
      console.log('组件实例:', vm);
    });
  },
  beforeRouteUpdate(to, from, next) {
    // 可以访问this
    this.fetchData(to.params.id);
    next();
  },
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      if (confirm('有未保存的更改，确定离开吗？')) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
}

37. 生命周期与服务器预取

37.1 服务端数据预取

javascript复制export default {
  async serverPrefetch() {
    // 服务端数据预取
    this.posts = await fetch('/api/posts').then(res => res.json());
  },
  mounted() {
    // 客户端数据获取
    if (!this.posts.length) {
      this.fetchPosts();
    }
  }
}

38. 生命周期与性能分析

38.1 性能测量

javascript复制export default {
  created() {
    performance.mark('component-created');
  },
  mounted() {
    performance.mark('component-mounted');
    performance.measure('创建到挂载', 'component-created', 'component-mounted');
  }
}

39. 生命周期与浏览器API

39.1 Intersection Observer

javascript复制export default {
  data() {
    return {
      observer: null
    }
  },
  mounted() {
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          console.log('元素进入视口');
        }
      });
    });
    this.observer.observe(this.$el);
  },
  beforeUnmount() {
    this.observer.disconnect();
  }
}

40. 生命周期与WebSocket

40.1 实时通信管理

javascript复制export default {
  data() {
    return {
      socket: null,
      messages: []
    }
  },
  created() {
    this.socket = new WebSocket('wss://example.com');
    this.socket.onmessage = (event) => {
      this.messages.push(JSON.parse(event.data));
    };
  },
  beforeUnmount() {
    if (this.socket) {
      this.socket.close();
    }
  }
}

41. 生命周期与IndexedDB

41.1 客户端存储

javascript复制export default {
  data() {
    return {
      db: null
    }
  },
  async mounted() {
    this.db = await new Promise((resolve, reject) => {
      const request = indexedDB.open('my-db', 1);
      request.onerror = reject;
      request.onsuccess = () => resolve(request.result);
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        db.createObjectStore('data', { keyPath: 'id' });
      };
    });
  },
  beforeUnmount() {
    if (this.db) {
      this.db.close();
    }
  }
}

42. 生命周期与WebRTC

42.1 实时通信

javascript复制export default {
  data() {
    return {
      peerConnection: null
    }
  },
  mounted() {
    this.peerConnection = new RTCPeerConnection();
    // 设置事件监听等
  },
  beforeUnmount() {
    if (this.peerConnection) {
      this.peerConnection.close();
    }
  }
}

43. 生命周期与Canvas

43.1 动画管理

javascript复制export default {
  data() {
    return {
      animationFrame: null
    }
  },
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    
    const animate = () => {
      // 绘制逻辑
      this.animationFrame = requestAnimationFrame(animate);
    };
    
    animate();
  },
  beforeUnmount() {
    cancelAnimationFrame(this.animationFrame);
  }
}

44. 生命周期与WebGL

44.1 3D渲染管理

javascript复制export default {
  data() {
    return {
      renderer: null,
      scene: null,
      camera: null
    }
  },
  mounted() {
    this.initThreeJS();
  },
  methods: {
    initThreeJS() {
      this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas });
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
      
      //