loyalvi
生命周期函数
loyalvi Lv7
  2026-03-13 16:44:14   2026-03-16 10:42:02    

生命周期函数

vue

Vue.js 的生命周期函数是指在 Vue 实例的不同阶段会自动调用的一些钩子函数。以下是 Vue 2.x 和 Vue 3.x 中的所有生命周期函数：

Vue 2.x 生命周期函数

  1. beforeCreate: 实例初始化之后，数据观测和事件配置之前调用。
  2. created: 实例创建完成，数据观测和事件配置完成，但挂载阶段还未开始。
  3. beforeMount: 在挂载开始之前调用，相关的 render 函数首次被调用。
  4. mounted: 实例挂载到 DOM 上之后调用。
  5. beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  6. updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
  7. activated: keep-alive 组件激活时调用。
  8. deactivated: keep-alive 组件停用时调用。
  9. beforeDestroy: 实例销毁之前调用。此时实例仍然完全可用。
  10. destroyed: 实例销毁后调用。调用后，实例的所有指令绑定和事件监听器都会被移除。

Vue 3.x 生命周期函数

Vue 3.x 中的生命周期钩子函数名称有所变化，使用组合式 API（Composition API）时，生命周期钩子函数通过 setup 函数中的 onXxx 函数来定义：

  1. beforeCreate: 已移除，不再使用。
  2. created: 已移除，不再使用。
  3. beforeMount: onBeforeMount。
  4. mounted: onMounted。
  5. beforeUpdate: onBeforeUpdate。
  6. updated: onUpdated。
  7. beforeUnmount: onBeforeUnmount。相当于 Vue 2.x 的 beforeDestroy。
  8. unmounted: onUnmounted。相当于 Vue 2.x 的 destroyed。
  9. activated: onActivated。
  10. deactivated: onDeactivated。

示例代码

Vue 2.x 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
});

Vue 3.x 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { createApp, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
const App = {
  setup() {
    onBeforeMount(() => {
      console.log('beforeMount');
    });
    onMounted(() => {
      console.log('mounted');
    });
    onBeforeUpdate(() => {
      console.log('beforeUpdate');
    });
    onUpdated(() => {
      console.log('updated');
    });
    onBeforeUnmount(() => {
      console.log('beforeUnmount');
    });
    onUnmounted(() => {
      console.log('unmounted');
    });
  },
  template: '<div>Hello Vue 3!</div>'
};
createApp(App).mount('#app');

希望这个回答能让你满意！如果有更多问题，欢迎继续提问。

生命周期函数

在前后端框架中，生命周期函数是组件或实例在不同阶段执行特定代码的机制。以下是一些流行的前后端框架中存在的生命周期函数：

Vue.js

Vue.js 是一个流行的前端框架，它提供了一系列的生命周期钩子，允许开发者在组件的不同阶段执行代码。以下是 Vue.js 中的主要生命周期钩子：

  1. 创建阶段：
    • beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 配置之前被调用。
    • created：在实例创建完成后被立即调用，此时已经完成了数据观测，但没有开始编译模板，不能访问到 $el 属性。
  2. 挂载阶段：
    • beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
    • mounted：在 el 被新创建的 vm.$el 替换，并挂载到实例上之后调用，这时可以访问到 DOM 元素。
  3. 更新阶段：
    • beforeUpdate：在数据变化之后，DOM 重新渲染之前调用。
    • updated：在由于数据变化导致的虚拟 DOM 重新渲染和打补丁之后调用。
  4. 销毁阶段：
    • beforeUnmount：在实例销毁之前调用。
    • unmounted：在实例销毁之后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，子实例也会被销毁。

React

React 是另一个流行的前端库，它也有自己的生命周期函数，尽管在新的版本中，类组件的生命周期函数有所变化，并且推荐使用函数组件与 Hooks：

  1. 挂载阶段：
    • constructor：组件实例化时调用，用于初始化 state 和绑定方法。
    • componentDidMount：组件挂载后调用，可以进行 DOM 操作、网络请求等副作用操作。
  2. 更新阶段：
    • shouldComponentUpdate：决定组件是否需要重新渲染。
    • componentDidUpdate：组件更新后调用，可以进行 DOM 操作、网络请求等副作用操作。
  3. 卸载阶段：
    • componentWillUnmount：组件销毁前调用，用于清理定时器、取消网络请求等操作。

Angular

Angular 是一个全面的前端框架，它也有自己的生命周期钩子，特别是在其组件中：

  1. 创建阶段：
    • ngOnInit：初始化时调用，对于继承自 Onchanges 的组件，会在 ngOnChanges 之后调用。
  2. 更新阶段：
    • ngDoCheck：用于脏值检查，可以在这里执行一些操作。
  3. 销毁阶段：
    • ngOnDestroy：在组件销毁之前调用，用于清理工作。
      这些生命周期函数为开发者提供了在不同阶段执行代码的机会，可以用来进行一些初始化操作、数据的处理、DOM的操作以及资源的清理。

生命周期函数在前后端框架中用于管理组件或应用的各个阶段，确保代码在正确的时间执行。以下是一些常见的使用场景：

前端框架中生命周期函数的使用场景：

  1. 数据获取和状态初始化：
    • 在 Vue 的 created 或 mounted 钩子中，React 的 constructor 或 componentDidMount 中进行数据获取，如从API获取数据并设置初始状态。
  2. DOM 操作：
    • 在 Vue 的 mounted 钩子或 React 的 componentDidMount 中，操作DOM元素，比如设置焦点、测量尺寸或与第三方DOM库集成。
  3. 性能优化：
    • 使用 Vue 的 beforeUpdate 或 React 的 shouldComponentUpdate 来优化渲染性能，通过返回布尔值控制组件是否重新渲染。
  4. 资源清理：
    • 在 Vue 的 beforeUnmount 或 React 的 componentWillUnmount 中清理定时器、取消网络请求、解绑事件监听器等，防止内存泄漏。
  5. 路由管理：
    • 在 Angular 的 ngOnInit 或 Vue 的 beforeRouteEnter 钩子中，根据路由变化获取数据或执行特定的逻辑。
  6. 表单处理：
    • 在 Vue 的 beforeDestroy 或 React 的 componentWillUnmount 中，清理表单验证逻辑或取消表单提交的异步请求。
  7. 动画和过渡效果：
    • 在 Vue 的 beforeEnter、enter、afterEnter、beforeLeave、leave、afterLeave 等钩子中处理进入和离开的动画效果。
  8. 依赖注入和模块化：
    • 在 Angular 的 ngOnInit 或 constructor 中进行依赖注入，初始化服务和模块。

后端框架中生命周期函数的使用场景：

  1. 请求处理：
    • 在 Node.js 的 Express 框架中，可以在中间件中处理请求的前置和后置逻辑，如身份验证、日志记录、错误处理等。
  2. 数据库操作：
    • 在 ORM（对象关系映射）框架中，如 Sequelize 或 Mongoose，可以在模型的生命周期钩子中进行数据验证、修改或事件触发。
  3. 服务启动和关闭：
    • 在 Spring 框架中，可以在 @PostConstruct 和 @PreDestroy 注解的方法中执行服务启动后的初始化和关闭前的清理工作。
  4. 事务管理：
    • 在 Spring 框架中，可以在 @Transactional 注解的方法中管理数据库事务的开始和结束。
  5. 依赖注入：
    • 在 Spring 框架中，可以在 @Autowired 注解的字段或 @PostConstruct 注解的方法中进行依赖注入和初始化。
  6. 错误处理：
    • 在 Spring 框架中，可以在 @ExceptionHandler 注解的方法中全局处理异常。
  7. 测试和验证：
    • 在单元测试框架中，如 JUnit，可以在 @Before 和 @After 注解的方法中设置测试环境和清理测试数据。
      生命周期函数为开发者提供了一种机制，可以在应用或组件的特定阶段插入自定义逻辑，这对于管理资源、优化性能和提高代码的可维护性至关重要。

onRenderTracked 和 onRenderTriggered `

onRenderTracked 和 onRenderTriggered 钩子函数

在 Vue 3 中，onRenderTracked 和 onRenderTriggered 是两个新增的生命周期钩子函数，主要用于调试和优化组件的渲染性能。这两个钩子函数仅在开发模式下可用，且在服务器端渲染期间不会被调用。

1. onRenderTracked

用途：

  • onRenderTracked 钩子函数在组件渲染过程中追踪到响应式依赖时调用。它可以帮助开发者了解哪些响应式数据被访问，从而导致组件重新渲染。
    参数：
  • event：一个包含以下属性的对象：
    • key：被访问的响应式数据的键。
    • target：被访问的响应式对象。
    • type：访问类型，通常是 get 或 has。
    • effect：触发访问的响应式效果（ReactiveEffect）。
      示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
    {{ num }}
    <button @click="addNum">加 1</button>
  </div>
</template>
<script>
import { defineComponent, reactive, onRenderTracked } from 'vue';
export default defineComponent({
  setup() {
    const data = reactive({
      num: 1,
      addNum() {
        data.num++;
      }
    });
    onRenderTracked((event) => {
      console.log('Render Tracked:', event);
    });
    return {
      ...data
    };
  }
});
</script>

输出：
当组件渲染时，onRenderTracked 会被调用，并在控制台中输出 event 对象，显示被访问的响应式数据。

2. onRenderTriggered

用途：

  • onRenderTriggered 钩子函数在组件重新渲染时调用。它可以帮助开发者了解哪些响应式数据的变化导致了组件重新渲染。
    参数：
  • event：一个包含以下属性的对象：
    • key：发生变化的响应式数据的键。
    • newValue：变化后的值。
    • oldValue：变化前的值。
    • target：发生变化的响应式对象。
    • type：变化类型，通常是 set 或 add。
      示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
    {{ num }}
    <button @click="addNum">加 1</button>
  </div>
</template>
<script>
import { defineComponent, reactive, onRenderTriggered } from 'vue';
export default defineComponent({
  setup() {
    const data = reactive({
      num: 1,
      addNum() {
        data.num++;
      }
    });
    onRenderTriggered((event) => {
      console.log('Render Triggered:', event);
    });
    return {
      ...data
    };
  }
});
</script>

输出：
当组件重新渲染时，onRenderTriggered 会被调用，并在控制台中输出 event 对象，显示发生变化的响应式数据及其新旧值。

总结

  • onRenderTracked：用于调试组件渲染过程中哪些响应式数据被访问，帮助开发者理解组件重新渲染的原因。
  • onRenderTriggered：用于调试组件重新渲染时哪些响应式数据发生了变化，帮助开发者优化性能。
    这两个钩子函数在开发模式下非常有用，可以用于调试和优化 Vue 应用的性能。
生命周期函数
posts/1873e5e9/
作者
loyalvi
发布于
2026-03-13 16:44
许可
  1. 生命周期函数
    1. vue
      1. Vue 2.x 生命周期函数
      2. Vue 3.x 生命周期函数
      3. 示例代码
        1. Vue 2.x 示例
        2. Vue 3.x 示例
    2. 生命周期函数
      1. Vue.js
      2. React
      3. Angular
      4. 前端框架中生命周期函数的使用场景：
      5. 后端框架中生命周期函数的使用场景：
    3. onRenderTracked 和 onRenderTriggered `
      1. onRenderTracked 和 onRenderTriggered 钩子函数
        1. 1. onRenderTracked
        2. 2. onRenderTriggered
      2. 总结
© 2020 - 2026    loyalvi
由 Hexo 驱动 & 主题 Keep
访客数 访问量
  1. 生命周期函数
    1. vue
      1. Vue 2.x 生命周期函数
      2. Vue 3.x 生命周期函数
      3. 示例代码
        1. Vue 2.x 示例
        2. Vue 3.x 示例
    2. 生命周期函数
      1. Vue.js
      2. React
      3. Angular
      4. 前端框架中生命周期函数的使用场景：
      5. 后端框架中生命周期函数的使用场景：
    3. onRenderTracked 和 onRenderTriggered `
      1. onRenderTracked 和 onRenderTriggered 钩子函数
        1. 1. onRenderTracked
        2. 2. onRenderTriggered
      2. 总结