您的位置:首页 > 文旅 > 美景 > 杭州推广公司企业_福州优化广告公司_360推广登陆_怎么样进行网络推广

杭州推广公司企业_福州优化广告公司_360推广登陆_怎么样进行网络推广

2025/3/18 0:46:18 来源:https://blog.csdn.net/qq_74114417/article/details/145959710  浏览:    关键词:杭州推广公司企业_福州优化广告公司_360推广登陆_怎么样进行网络推广
杭州推广公司企业_福州优化广告公司_360推广登陆_怎么样进行网络推广

文章目录

  • 一、Vue3生命周期核心阶段与钩子函数
  • 二、Vue3生命周期示例:选项式 vs 组合式 API
    • 选项式 API 示例(Vue2)
    • 组合式 API 示例(Vue3)
  • 三、Vue3与Vue2生命周期的核心差异
    • 1. 钩子函数更名
    • 2. 组合式 API 的影响
    • 3. 新增调试钩子
    • 4. 异步更新机制
  • 四、Vue3 vs Vue2 生命周期执行顺序对比
  • 五、最佳实践与常见问题
  • 六、总结

一、Vue3生命周期核心阶段与钩子函数

Vue3 的生命周期分为四个主要阶段:​创建、挂载、更新、销毁,每个阶段提供对应的钩子函数,允许开发者在关键节点插入逻辑。以下是各阶段的核心钩子及用途:

阶段钩子函数触发时机与用途
创建setup组合式 API 的入口,替代 Vue2 的 beforeCreate 和 created,初始化响应式数据
onBeforeMount组件挂载到 DOM 前,模板编译完成但未渲染
挂载onMounted组件已挂载到 DOM,可安全操作 DOM 或初始化第三方库(如图表)
更新onBeforeUpdate数据变化导致虚拟DOM更新前,可获取更新前的DOM状态(如滚动位置)
onUpdated数据变化后DOM已更新,需要避免在此修改数据以免循环更新
销毁onBeforeUnmount组件卸载前,清理定时器、事件监听等资源
onUnmounted组件已卸载,所有子实例和事件监听器已移除

新增调试钩子

  • onRenderTracked: 追踪虚拟DOM的依赖收集(首次渲染触发)
  • onRenderTriggerd: 追踪触发重新渲染的具体依赖(更新时触发)

二、Vue3生命周期示例:选项式 vs 组合式 API

选项式 API 示例(Vue2)

export default {data() {return { count: 0 };},created() {console.log('数据已初始化,可发起请求'); // [1,5](@ref)},mounted() {console.log('DOM 已挂载,可操作元素'); this.$refs.button.addEventListener('click', this.increment);},beforeUnmount() {this.$refs.button.removeEventListener('click', this.increment); // [9](@ref)},methods: {increment() { this.count++; }}
};

组合式 API 示例(Vue3)

import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const count = ref(0);const increment = () => { count.value++; };onMounted(() => {console.log('DOM 挂载完成'); // [4,5](@ref)document.getElementById('btn').addEventListener('click', increment);});onUnmounted(() => {document.getElementById('btn').removeEventListener('click', increment);});return { count };}
};

三、Vue3与Vue2生命周期的核心差异

1. 钩子函数更名

  • beforeDestroybeforeUnmount
  • destroyedunmounted

2. 组合式 API 的影响

  • setup 替代了 beforeCreatecreate, 逻辑集中管理
  • 钩子通过函数形式引入(如onMounted),提升代码复用性

3. 新增调试钩子

  • onRenderTrackedonRenderTriggered 用于性能分析

4. 异步更新机制

  • Vue3 的更新阶段采用异步渲染,优化性能并减少不必要的重复计算

四、Vue3 vs Vue2 生命周期执行顺序对比

以父子组件为例:

  • ​Vue2:父 created → 子 created → 子 mounted → 父 mounted。
    ​- Vue3:父 setup → 子 setup → 父 onBeforeMount → 子 onBeforeMount → 子 onMounted → 父 onMounted

五、最佳实践与常见问题

  • 避免在 mounted 中频繁操作 DOM,优先使用响应式数据驱动视图。
  • ​清理副作用**:在 onBeforeUnmount 中移除事件监听或定时器。
  • 组合式 API 的优势:将相关逻辑封装为自定义 Hook(如 useFetch),提升复用性

六、总结

Vue3 的生命周期设计在兼容 Vue2 的同时,通过组合式 API 和更精确的钩子命名,提供了更灵活的代码组织方式。无论是选项式还是组合式,合理利用生命周期钩子能显著提升组件性能和可维护性。升级到 Vue3 时,建议优先采用组合式 API 以发挥其最大优势.

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com