【vue】11.Vue 3生命周期钩子在实践中的具体应用

Vue 3的生命周期钩子为开发者提供了在不同阶段操作组件的强大能力。本文将带您了解每个生命周期钩子的使用场景，并通过简单的案例来展示它们在实际开发中的应用。

1. 创建阶段（Creation Hooks）

beforeCreate

进行一些初始化操作，如设置全局属性。

beforeCreate 钩子函数是在实例初始化之后，数据观测（data observer）和事件/watcher 设置之前被调用的。在这个阶段，组件实例的选项如 data、computed 和 methods 尚未被设置，因此不能访问它们。

示例1. 初始化全局事件总线或全局变量

在 beforeCreate 钩子中，可以设置一些全局属性或事件总线，这些属性或事件总线可以在整个应用的生命周期内使用。

Vue.prototype.$bus = new Vue(); // 创建一个空的Vue实例作为事件总线

export default {
  beforeCreate() {
    // 在组件创建之前，设置全局事件总线
    this.$bus.$on('global-event', this.handleGlobalEvent);
  },
  methods: {
    handleGlobalEvent(data) {
      // 处理全局事件
    }
  },
  beforeDestroy() {
    // 在组件销毁之前，移除事件监听
    this.$bus.$off('global-event', this.handleGlobalEvent);
  }
};

 示例2. 初始化全局插件配置

如果正在使用一个需要在应用启动之前进行配置的插件，可以在 beforeCreate 钩子中进行设置。

export default {
  beforeCreate() {
    // 初始化一个第三方插件的配置
    this.$pluginConfig = {
      option1: 'value1',
      option2: 'value2'
    };
    // 调用一个初始化方法
    initializePlugin(this.$pluginConfig);
  }
};

示例3. 设置组件的初始状态

虽然 data 在 beforeCreate 钩子中不可用，但可以设置一些组件实例的属性，这些属性可以在后续的钩子中使用。

export default {
  beforeCreate() {
    // 设置组件的初始状态，例如一个标记位
    this.$options.initState = true;
  },
  created() {
    // 在 created 钩子中，可以访问到 this.initState
    if (this.$options.initState) {
      // 执行一些基于初始状态的逻辑
    }
  }
};

示例4. 加载初始数据

虽然 beforeCreate 不是获取数据的最佳时机（因为 data 和 methods 尚未初始化），但可以在这里初始化一个数据加载器，然后在 created 或 mounted 钩子中使用它。

export default {
  beforeCreate() {
    // 初始化一个数据加载器
    this.$options.loadData = function() {
      // 实际的数据加载逻辑
    };
  },
  created() {
    // 在 created 钩子中调用数据加载器
    this.$options.loadData();
  }
};

示例5. 检查应用环境

在 beforeCreate 钩子中，可以检查当前应用的环境，并根据环境进行相应的配置。

export default {
  beforeCreate() {
    // 检查当前环境
    if (process.env.NODE_ENV === 'production') {
      // 生产环境的配置
      this.$options.productionConfig = true;
    } else {
      // 开发环境的配置
      this.$options.developmentConfig = true;
    }
  }
};

beforeCreate 钩子用于在组件实例化之前进行一些准备工作，但是要注意，由于此时组件的 data、computed 和 methods 还未初始化，因此任何依赖于这些选项的操作都应该放在 created 或之后的钩子中进行。

created

进行数据初始化，发送异步请求。

在Vue中，created 钩子函数是在实例创建完成后被立即调用的。在这个阶段，组件实例已经完成数据观测（data observer）、属性和方法的运算，watch/event 事件回调已设置，但是挂载阶段尚未开始，$el 属性目前不可见。以下是 created 钩子的一些具体使用场景和详细说明：

示例1. 初始化数据

在 created 钩子中，可以初始化 data 对象中的数据，特别是那些依赖于组件实例化的数据。

export default {
  data() {
    return {
      items: [],
      loading: false
    };
  },
  created() {
    // 初始化数据
    this.items = this.fetchInitialItems();
  },
  methods: {
    fetchInitialItems() {
      // 返回初始数据
      return [/* 初始数据项 */];
    }
  }
};

示例2. 发送异步请求

由于 created 钩子执行时机较早，并且可以访问到 data 和 methods，因此它该时段是发送异步请求获取数据的好时机。

export default {
  data() {
    return {
      userData: null
    };
  },
  created() {
    // 发送异步请求获取用户数据
    this.fetchUserData();
  },
  methods: {
    async fetchUserData() {
      this.loading = true;
      try {
        const response = await axios.get('/api/user');
        this.userData = response.data;
      } catch (error) {
        console.error('Error fetching user data:', error);
      } finally {
        this.loading = false;
      }
    }
  }
};

示例3. 计算属性和监听器的初始化

可以基于初始化的数据来设置计算属性或者监听器。

export default {
  data() {
    return {
      input: ''
    };
  },
  created() {
    // 可以在这里初始化计算属性或监听器
    this.initComputedAndWatchers();
  },
  computed: {
    // 基于初始化数据设置的计算属性
    computedProperty() {
      // ...
    }
  },
  watch: {
    // 基于初始化数据设置的监听器
    input(newValue, oldValue) {
      // ...
    }
  },
  methods: {
    initComputedAndWatchers() {
      // 初始化计算属性和监听器的逻辑
    }
  }
};

示例4. 插件或外部库的初始化

如果需要在组件创建后立即使用某个插件或外部库，可以在 created 钩子中进行初始化。

export default {
  created() {
    // 初始化外部库，例如moment.js的本地化设置
    moment.locale('zh-CN');
  }
};

示例5. 预处理组件的默认行为

在组件被渲染之前，可以需要对某些行为进行预处理，比如根据默认参数设置组件的状态。

export default {
  props: {
    defaultActive: Boolean
  },
  data() {
    return {
      isActive: false
    };
  },
  created() {
    // 根据默认属性设置组件状态
    this.isActive = this.defaultActive;
  }
};

在 created 钩子中执行的操作应该只涉及数据准备和异步请求，而不应该涉及到DOM操作，因为此时DOM还未挂载。任何需要在DOM元素上执行的操作应该放在 mounted 钩子中。

2. 挂载阶段（Mounting Hooks）

beforeMount

进行最后的DOM渲染前的预处理。

在Vue中，beforeMount 钩子函数是在组件挂载之前被调用的，此时已经完成了模板的编译，但是还没有将数据渲染到页面上。这个钩子函数可以用来执行一些DOM渲染前的预处理操作。以下是 beforeMount 钩子的一些具体使用场景和详细说明：

示例1. 访问和操作模板字符串

在 beforeMount 钩子中，可以访问到组件的模板字符串，但此时模板尚未被渲染成实际的DOM元素。因此该阶段可以对模板进行最后的检查或修改。

export default {
  beforeMount() {
    // 检查模板字符串是否符合某些条件
    console.log(this.$options.template);
    // 进行预处理操作，例如替换模板中的占位符
  }
};

示例2. 设置非响应式数据

有时需要在组件挂载前设置一些非响应式的数据，这些数据不需要触发视图更新。

export default {
  data() {
    return {
      // 响应式数据
    };
  },
  beforeMount() {
    // 设置非响应式数据
    this.nonReactiveData = someNonReactiveValue();
  }
};

示例3. 预处理样式或类名

在组件挂载前，可以根据数据状态预处理样式或类名，以确保在DOM渲染时能够正确应用。

export default {
  data() {
    return {
      isActive: true
    };
  },
  beforeMount() {
    // 根据状态设置初始类名
    this.dynamicClass = this.isActive ? 'active' : 'inactive';
  }
};

示例4. 初始化第三方库

如果第三方库需要在DOM元素渲染之前进行初始化，可以在 beforeMount 钩子中进行。

export default {
  beforeMount() {
    // 初始化第三方库，例如jQuery插件
    this.$nextTick(() => {
      // 确保在DOM更新后执行
      this.initializeThirdPartyLibrary();
    });
  },
  methods: {
    initializeThirdPartyLibrary() {
      // 初始化第三方库的代码
    }
  }
};

示例5.优化性能：避免不必要的渲染

如果组件中包含复杂的计算或数据预处理，可以在 beforeMount 钩子中执行这些操作，减少首次渲染时的计算量。

export default {
  data() {
    return {
      complexData: []
    };
  },
  beforeMount() {
    // 预处理复杂数据，减少首次渲染的计算量
    this.complexData = this.processComplexData();
  },
  methods: {
    processComplexData() {
      // 处理复杂数据的逻辑
    }
  }
};

注意事项

• 在 beforeMount 钩子中不要进行DOM操作，因为此时Vue还没有将虚拟DOM转换为实际的DOM元素。
• 如果需要确保操作的是渲染后的DOM，可以在 beforeMount 钩子中使用 this.$nextTick，它将在DOM更新完成后执行回调函数。

使用 beforeMount 钩子时，应该考虑它是在组件生命周期中的特定阶段执行的，确保使用场景适合在这个阶段进行。

mounted

执行需要访问到DOM的操作。

示例1. 访问DOM元素

可以通过 ref 属性在模板中给DOM元素注册引用信息，然后在 mounted 钩子中通过 this.$refs 访问到这些元素。

案例：聚焦输入框

<template>
  <input ref="inputRef" />
</template>

<script>
export default {
  mounted() {
    // 当组件挂载后，自动聚焦到输入框
    this.$refs.inputRef.focus();
  }
};
</script>

示例2. 初始化第三方库

有些第三方库需要在DOM元素挂载之后才能初始化，例如，使用jQuery插件或者初始化一个日期选择器。

案例：初始化日期选择器

<template>
  <input id="datepicker" />
</template>

<script>
export default {
  mounted() {
    // 假设我们有一个日期选择器的插件
    $('#datepicker').datepicker();
  }
};
</script>

示例3. 计算元素的尺寸或位置

有时可能需要在组件加载时获取某个元素的尺寸或位置信息。

<template>
  <div ref="elementRef"></div>
</template>

<script>
export default {
  mounted() {
    // 获取元素的尺寸
    const rect = this.$refs.elementRef.getBoundingClientRect();
    console.log(rect.width, rect.height);
  }
};
</script>

示例4. 设置定时器

虽然 created 钩子也可以设置定时器，但在 mounted 钩子中设置定时器更合适，因为它确保DOM已经渲染。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  mounted() {
    // 设置一个定时器，5秒后更新消息
    setTimeout(() => {
      this.message = 'Updated Message';
    }, 5000);
  }
};
</script>

示例5. 执行动画或过渡

在元素挂载后，也可以执行一些动画或过渡效果。

<template>
  <div ref="animateRef"></div>
</template>

<script>
export default {
  mounted() {
    // 使用CSS动画或JavaScript动画库执行动画
    this.$refs.animateRef.animate([{ transform: 'translateX(0px)' }, { transform: 'translateX(100px)' }], 500);
  }
};
</script>

3. 更新阶段（Update Hooks）

beforeUpdate

在数据更新前访问旧DOM。

beforeUpdate 钩子函数是在数据更新之前被调用的，此时Vue实例的数据已经更新，但是DOM还没有被重新渲染。这个钩子函数可以用来在数据更新之前执行一些操作，尤其是那些需要依赖于旧DOM状态的操作。以下是 beforeUpdate 钩子的一些具体使用场景和详细说明：

示例1. 获取和记录旧的DOM状态

当组件的数据发生变化，但在DOM更新之前，可以使用 beforeUpdate 钩子来获取和记录旧的DOM状态，以便后续比较或操作。

export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  beforeUpdate() {
    // 获取当前DOM元素的文本内容
    const oldText = this.$el.textContent;
    console.log('Old text:', oldText);
    // 可以将旧文本保存起来，用于后续比较或其他操作
  }
};

示例2. 比较新旧数据，避免不必要的DOM更新

在数据更新前，可以比较新旧数据，如果数据没有实质性变化，可以避免进行DOM更新，从而提高性能。

export default {
  data() {
    return {
      items: [1, 2, 3]
    };
  },
  beforeUpdate() {
    // 比较新旧数据
    if (this.items.length === this.$el.children.length) {
      // 数据没有变化，避免更新DOM
      this.preventUpdate = true;
    }
  },
  updated() {
    if (this.preventUpdate) {
      this.preventUpdate = false;
      // 取消或重置一些状态
    }
  }
};

示例3. 清理或解绑旧的事件监听器

如果组件的DOM元素绑定了事件监听器，且数据更新可能导致DOM元素被重新渲染，可以在 beforeUpdate 钩子中解绑这些事件监听器，以避免内存泄漏。

export default {
  mounted() {
    // 绑定事件监听器
    this.$el.addEventListener('click', this.handleEvent);
  },
  beforeUpdate() {
    // 在数据更新前解绑事件监听器
    this.$el.removeEventListener('click', this.handleEvent);
  },
  methods: {
    handleEvent() {
      // 事件处理逻辑
    }
  }
};

示例4. 手动触发依赖于当前DOM状态的操作

在某些情况下，可能需要在数据更新前手动触发依赖于当前DOM状态的操作，比如计算元素的尺寸、位置等。

export default {
  data() {
    return {
      content: 'Some text'
    };
  },
  beforeUpdate() {
    // 在数据更新前计算元素的尺寸
    const oldHeight = this.$el.clientHeight;
    console.log('Old height:', oldHeight);
    // 可能需要对旧尺寸进行一些处理
  }
};

注意事项

• 在 beforeUpdate 钩子中操作DOM时，应确保操作是基于当前即将被更新前的DOM状态。
• beforeUpdate 钩子中不应该直接修改数据，这可能会导致额外的更新循环。
• 如果需要确保操作的是更新后的DOM，应该使用 updated 钩子。

使用 beforeUpdate 钩子时，应该仔细考虑何时需要访问和操作旧的DOM状态，以及如何处理这些操作以确保组件的行为符合预期。

updated

执行依赖于更新后DOM的操作。

updated 钩子函数是在组件DOM更新之后被调用的。这意味着在 updated 钩子执行时，所有的数据变化都已经反映到DOM上。以下是 updated 钩子的一些具体使用场景和详细说明：

示例1. 访问更新后的DOM元素

当组件的数据更新后，可能需要获取更新后的DOM元素信息，比如尺寸、位置等。

export default {
  data() {
    return {
      width: 100
    };
  },
  methods: {
    updateWidth(newWidth) {
      this.width = newWidth;
    }
  },
  updated() {
    // 获取更新后的元素宽度
    const newWidth = this.$el.clientWidth;
    console.log('Updated width:', newWidth);
    // 可以根据新的尺寸进行一些操作，比如调整其他元素的布局
  }
};

示例2. 执行依赖于DOM状态的操作

某些操作需要在DOM更新之后才能正确执行，比如依赖新DOM状态的计算、初始化第三方库等。

案例：初始化第三方图表库

export default {
  data() {
    return {
      chartData: []
    };
  },
  methods: {
    fetchData() {
      // 获取数据
      this.chartData = [...];
    }
  },
  updated() {
    // 确保DOM更新后初始化图表
    if (this.chartData.length > 0) {
      this.initializeChart();
    }
  },
  methods: {
    initializeChart() {
      // 使用第三方图表库初始化图表
      new Chart(this.$refs.chart, {
        // 配置选项
      });
    }
  }
};

示例3. 重新绑定事件监听器

如果组件的DOM元素在更新后发生了变化，比如增加了新的子元素，可能需要重新绑定事件监听器。

export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    addItem() {
      this.items.push({ id: this.items.length + 1 });
    },
    handleItemClick(item) {
      // 处理点击事件
    }
  },
  updated() {
    // 为新增的子元素绑定点击事件
    this.$refs.items.forEach(item => {
      item.addEventListener('click', this.handleItemClick);
    });
  }
};

示例4. 动画和过渡效果

在数据更新后，对DOM元素应用动画或过渡效果，以平滑地展示变化。

export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  },
  updated() {
    // 确保DOM更新后应用过渡效果
    if (this.show) {
      this.$refs.content.classList.add('fade-in');
    } else {
      this.$refs.content.classList.remove('fade-in');
    }
  }
};

注意事项

• 在 updated 钩子中访问DOM时，应确保操作是基于最新更新的DOM状态。
• 如果在 updated 钩子中修改了数据，可能会触发额外的更新周期，导致性能问题。
• 对于复杂的DOM操作或动画，考虑使用Vue的过渡和动画系统来提高性能和可维护性。

使用 updated 钩子时，应当谨慎地执行那些确实需要在DOM更新之后进行的操作，以避免不必要的性能开销和潜在的错误。

4. 卸载阶段（Unmounting Hooks）

beforeUnmount

使用场景：解绑事件监听器，清理资源。

beforeUnmount 钩子函数是在组件实例即将被销毁之前调用的。这个钩子提供了一种在组件被移除之前执行清理工作的机会，确保不会留下任何悬挂的事件监听器或未清理的资源。以下是 beforeUnmount 钩子的一些具体使用场景和详细说明：

示例1. 解绑全局事件监听器

如果组件在创建时添加了全局事件监听器（如窗口事件、键盘事件等），在组件销毁前需要解绑这些监听器，以避免内存泄漏。

export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 处理窗口大小变化
    }
  }
};

示例2. 清理定时器和间隔器

组件中如果有使用 setTimeout 或 setInterval 设置的定时器，需要在组件销毁前清除这些定时器，避免它们在组件销毁后仍然执行。

export default {
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.timer = setTimeout(() => {
      // 执行定时任务
    }, 1000);
  },
  beforeUnmount() {
    clearTimeout(this.timer);
  }
};

示例3. 取消网络请求

如果组件中有发起的网络请求（如使用 XMLHttpRequest 或 fetch），需要在组件销毁前取消这些请求，避免它们在组件销毁后仍然执行回调。

export default {
  data() {
    return {
      request: null
    };
  },
  mounted() {
    this.request = fetch('/api/data').then(response => {
      // 处理响应
    });
  },
  beforeUnmount() {
    if (this.request) {
      this.request.cancel(); // 如果fetch支持取消，则取消请求
    }
  }
};

示例4. 解绑第三方库实例

如果组件使用了第三方库（如地图库、图表库等），并创建了对应的实例，需要在组件销毁前正确地清理这些实例。

export default {
  mounted() {
    this.mapInstance = new MapLibrary.Map(this.$refs.mapContainer);
  },
  beforeUnmount() {
    this.mapInstance.destroy(); // 调用第三方库的销毁方法
  }
};

示例5. 清理Web Workers

如果组件使用了Web Workers，在组件销毁前应该正确地终止这些workers。

export default {
  data() {
    return {
      worker: null
    };
  },
  mounted() {
    this.worker = new Worker('worker.js');
  },
  beforeUnmount() {
    this.worker.terminate(); // 终止Web Worker
  }
};

示例6. 解绑自定义事件监听器

如果组件通过 $emit 或 $on 添加了自定义事件监听器，需要在组件销毁前解绑这些事件。

export default {
  mounted() {
    this.$on('custom-event', this.handleCustomEvent);
  },
  beforeUnmount() {
    this.$off('custom-event', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent() {
      // 处理自定义事件
    }
  }
};

注意事项

• 确保 beforeUnmount 钩子中的清理逻辑不会触发额外的更新周期。
• 如果组件被缓存（如使用 <keep-alive>），beforeUnmount 不会被调用，此时应该使用 deactivated 钩子来清理资源。
• 对于可能引起内存泄漏的资源，务必在 beforeUnmount 中进行清理

unmounted

执行清理操作，如清除定时器。

unmounted 钩子函数是在组件实例被销毁之后调用的。这个钩子函数确保了组件已经从DOM中移除，且相关的响应式连接已经被断开。以下是 unmounted 钩子的一些具体使用场景和详细说明：

示例1. 清除定时器

组件中如果有使用 setTimeout 或 setInterval 设置的定时器，在组件被销毁后，需要确保这些定时器不再执行，以避免内存泄漏和不必要的计算。

export default {
  data() {
    return {
      timeoutId: null
    };
  },
  methods: {
    scheduleTask() {
      this.timeoutId = setTimeout(() => {
        // 执行定时任务
      }, 1000);
    }
  },
  mounted() {
    this.scheduleTask();
  },
  unmounted() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
  }
};

示例2. 停止动画帧

如果组件使用了 requestAnimationFrame 来执行动画，那么在组件卸载后应该停止这些动画帧，以避免在看不见的组件上执行不必要的计算。

export default {
  data() {
    return {
      frameId: null
    };
  },
  methods: {
    animate() {
      // 动画逻辑
      this.frameId = requestAnimationFrame(this.animate);
    }
  },
  mounted() {
    this.animate();
  },
  unmounted() {
    if (this.frameId) {
      cancelAnimationFrame(this.frameId);
    }
  }
};

示例3. 断开WebSockets连接

如果组件建立了WebSocket连接，在组件卸载后应该关闭这个连接，以避免资源浪费和潜在的数据接收问题。

export default {
  data() {
    return {
      socket: null
    };
  },
  mounted() {
    this.socket = new WebSocket('wss://example.com/socket');
    this.socket.onmessage = this.handleMessage;
  },
  unmounted() {
    if (this.socket) {
      this.socket.close();
    }
  },
  methods: {
    handleMessage(event) {
      // 处理接收到的消息
    }
  }
};

示例4. 清理第三方库实例

如果组件使用了第三方库（如视频播放器、图表库等），并且创建了实例，在组件卸载后应该清理这些实例，释放资源。

export default {
  data() {
    return {
      player: null
    };
  },
  mounted() {
    this.player = new VideoPlayer(this.$refs.videoPlayer);
  },
  unmounted() {
    if (this.player) {
      this.player.dispose(); // 调用第三方库的清理方法
    }
  }
};

示例5. 清理DOM事件监听器

如果组件直接在DOM元素上添加了事件监听器，而不是通过Vue的事件系统，那么在组件卸载后应该移除这些监听器。

export default {
  mounted() {
    this.$refs.button.addEventListener('click', this.handleClick);
  },
  unmounted() {
    this.$refs.button.removeEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      // 处理点击事件
    }
  }
};

注意事项

• 在 unmounted 钩子中执行的操作不应依赖于Vue实例的状态或响应式系统，因为此时实例已经不再可用。
• 如果组件使用了 <keep-alive> 标签，则 unmounted 钩子不会在组件隐藏时被调用，而是在组件被销毁时调用。
• 对于需要清理的资源，确保在 unmounted 钩子中进行了适当的处理，以避免潜在的资源泄漏问题

合理利用这些钩子，可以让我们的组件更加高效、可维护。在实际开发中，应根据具体场景选择合适的生命周期钩子来完成任务。