vue3和vue2生命周期的区别

Vue 3 的生命周期与 Vue 2 相比有以下核心区别,主要体现在 钩子函数命名组合式 API新增功能 上。以下是详细对比和示例说明:


1. 生命周期钩子名称变化

Vue 3 对部分生命周期钩子进行了重命名,以保持命名一致性(添加 on 前缀),并适配组合式 API:

Vue 2 Vue 3 说明
beforeCreate 无(由 setup 替代) setup 函数已包含其逻辑
created 无(由 setup 替代) setup 函数已包含其逻辑
beforeMount onBeforeMount 组件挂载前触发
mounted onMounted 组件挂载后触发
beforeUpdate onBeforeUpdate 数据更新前触发
updated onUpdated 数据更新后触发
beforeDestroy onBeforeUnmount 组件卸载前触发
destroyed onUnmounted 组件卸载后触发
activated onActivated <keep-alive> 缓存组件激活时触发
deactivated onDeactivated <keep-alive> 缓存组件停用时触发
errorCaptured onErrorCaptured 捕获子组件错误时触发

2. 组合式 API 的引入

Vue 3 引入了 组合式 API(Composition API) ,通过 setup() 函数替代 Vue 2 的 beforeCreatecreated 钩子。组合式 API 提供了更灵活的代码组织方式,尤其适合逻辑复用。

Vue 2 示例(选项式 API)
javascript 复制代码
export default {
  data() {
    return { count: 0 };
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
  }
};
Vue 3 示例(组合式 API)
javascript 复制代码
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    console.log('setup'); // 替代 Vue 2 的 created/beforeCreate

    onMounted(() => {
      console.log('mounted');
    });

    return { count };
  }
};

3. 新增调试钩子

Vue 3 新增了两个调试钩子,用于追踪响应式依赖和渲染触发:

  • onRenderTracked:当渲染函数追踪到响应式依赖时触发。
  • onRenderTriggered:当响应式依赖触发重新渲染时触发。
示例
javascript 复制代码
import { onRenderTracked, onRenderTriggered } from 'vue';

export default {
  setup() {
    onRenderTracked((event) => {
      console.log('追踪依赖:', event.key); // 打印被追踪的响应式属性
    });

    onRenderTriggered((event) => {
      console.log('触发更新:', event.key); // 打印触发更新的响应式属性
    });
  }
};

4. 执行顺序变化(父子组件)

在父子组件的生命周期执行顺序上,Vue 3 与 Vue 2 有差异:

Vue 2 的执行顺序
javascript 复制代码
父 created → 子 created → 子 mounted → 父 mounted
Vue 3 的执行顺序
复制代码
父 setup → 子 setup → 父 onBeforeMount → 子 onBeforeMount → 子 onMounted → 父 onMounted

5. 异步更新机制优化

Vue 3 的更新阶段采用 异步渲染 机制,优化了性能并减少不必要的重复计算。例如,多次修改响应式数据后,Vue 3 会合并更新,避免频繁触发 DOM 操作。

示例
javascript 复制代码
import { ref, onUpdated } from 'vue';

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

    onUpdated(() => {
      console.log('DOM 更新后触发一次');
    });

    // 多次修改 count,只会触发一次 onUpdated
    count.value++;
    count.value++;
  }
};

6. 清理副作用(Cleanup)

在 Vue 3 中,onBeforeUnmount 是清理资源(如定时器、事件监听器)的推荐位置。

Vue 2 示例
javascript 复制代码
export default {
  mounted() {
    this.timer = setInterval(() => {
      console.log('定时器运行');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清理定时器
  }
};
Vue 3 示例
javascript 复制代码
import { onMounted, onBeforeUnmount } from 'vue';

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

    onMounted(() => {
      timer = setInterval(() => {
        console.log('定时器运行');
      }, 1000);
    });

    onBeforeUnmount(() => {
      clearInterval(timer); // 清理定时器
    });
  }
};

7. 完整对比示例

Vue 2 生命周期钩子
javascript 复制代码
export default {
  data() {
    return { message: 'Hello Vue 2' };
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  }
};
Vue 3 生命周期钩子
javascript 复制代码
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3');

    console.log('setup'); // 替代 created/beforeCreate

    onMounted(() => {
      console.log('mounted');
    });

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount'); // 替代 beforeDestroy
    });

    return { message };
  }
};

总结

特性 Vue 2 Vue 3
钩子名称 原始命名(如 beforeCreate 添加 on 前缀(如 onBeforeMount
组合式 API 不支持 支持,通过 setup() 函数组织逻辑
调试钩子 新增 onRenderTracked/onRenderTriggered
执行顺序 父组件先执行 created 父组件先执行 setup
清理资源 beforeDestroy onBeforeUnmount
异步更新优化 同步更新 异步合并更新

最佳实践建议

  1. 优先使用组合式 API:在 Vue 3 中,组合式 API 更适合复杂逻辑的组织和复用。
  2. 清理资源 :始终在 onBeforeUnmount 中移除事件监听器或清除定时器。
  3. 避免在 onUpdated 中修改数据:防止无限更新循环。
  4. 利用调试钩子 :通过 onRenderTrackedonRenderTriggered 优化性能瓶颈。

通过以上对比,可以更清晰地理解 Vue 3 的生命周期设计与 Vue 2 的差异,并在实际开发中灵活应用。

相关推荐
麦麦大数据21 分钟前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
Kevin Wang7271 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic1 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年1 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala1 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20081 小时前
前端-ES6-11
前端·es6
菜鸟una2 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年2 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js2 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
文火冰糖的硅基工坊3 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人