Vue2 生命周期

 最近使用Vue2做了一个项目,在使用的过程中对数据的请求发生在实例创建哪个阶段有点不清楚,在论坛查阅资料后,对Vue2实例创建生命周期做一个总结。

 在最开始,想把数据放在created钩子上进行请求,发现请求的数据并不能挂载到data里面。因为data还没有进行初始化,数据的初始化是在created和beformount之间发生的。所以请求放在mounted钩子,然后将请求到的数据更新到已经初始化了的数据上。

Vue2生命周期图在官方文档中如下:

在Vue2中,生命周期钩子分别是:


beforeCreate:实例刚创建,属性绑定之前


created:实例创建完成,属性绑定,但是还未将实例挂载到'el'上,也就是挂载元素上。


在created之后会进行一个判断,实例创建中是否是具有'el'这个选项(option),如果有,那么判断是否具有template模板这个选项,如果没有,那么当实例被创建后使用vm.$mount(el)手动进行挂载再进行判断是否具有template。在判断template时,如果具有template那么将template编译进渲染函数,如果没有就将'el'的外部HTML作为template。


beforeMount:模板编译/挂载前


在beforeMount和mounted之间会创建一个$el用来替换'el',也就是将编译好的模板挂载到对应的挂载元素上。


mounted:模板编译/挂载之后


在mounted请求数据时,将数据更新到已经初始化后的数据里。在这个过程中,会先执行beforeUpdate后执行updated,在这两个生命钩子间执行DOM的重新渲染和patch(不知道怎么去形容,原意是补丁的意思,按我理解就是将原来data没有的数据添加到data里面)


在执行手动销毁(实例名.$destroy())后执行beforeDestroy

在beforeDestroy和destroyed之间会将数据监听(watchers),事件监听(listeners)和子组件(components)拆除。

再执行destroyed。

举例对生命钩子的使用:

beforCreate:在加载DOM创建实例时插入loading等

created:结束loading

mounted:发起数据请求,更新数据

beforeDestory:在这可以询问是否是删除某某某

<think>好的,用户想了解Vue3和Vue2生命周期的区别。我需要先整理两个版本的生命周期钩子,对比它们的命名、使用方式以及新增的变化。 首先,根据引用[4],Vue3的钩子名称改为以“on”开头,比如onMounted,而Vue2的是mounted这样的。然后,组合式API是Vue3的新特性,用户可能在setup中使用这些钩子,需要说明这点。 接着,销毁阶段的钩子名称变化,Vue2的beforeDestroy和destroyed在Vue3中变成了onBeforeUnmount和onUnmounted,这点引用[3]和[4]都有提到。 另外,Vue3新增了onServerPrefetch用于服务端渲染,这是Vue2没有的,引用[4]里有说明。同时,触发时机可能有变化,比如setup替代了beforeCreate和created,用户需要知道在setup里如何访问数据。 还要注意根节点的变化,Vue3支持多个根节点,可能影响生命周期的行为,引用[2]提到根节点的区别。最后,性能优化方面,Vue3的钩子更高效,响应式系统不同,这也是区别的一部分。 需要确保回答结构清晰,分点列出命名变化、使用方式、新增钩子、触发时机和性能优化。最后生成相关问题,覆盖迁移建议、组合式API影响、销毁阶段变化和性能对比等。</think>### Vue3 与 Vue2 生命周期对比及区别 #### 1. **命名规范变化** - **Vue2**:使用传统的前缀命名方式,例如:`beforeCreate`、`created`、`beforeMount`、`mounted`[^4]。 - **Vue3**:改为以 `on` 为前缀的函数式命名,例如:`onBeforeCreate`、`onCreated`、`onBeforeMount`、`onMounted`。 #### 2. **组合式 API 的引入** - **Vue3** 的生命周期钩子需在 `setup()` 函数中显式导入并使用: ```javascript import { onMounted } from 'vue'; export default { setup() { onMounted(() => { console.log('组件已挂载'); }); } } ``` 而 **Vue2** 直接在组件选项中声明钩子函数[^2][^4]。 #### 3. **销毁阶段的重命名** - **Vue2**:`beforeDestroy` 和 `destroyed`。 - **Vue3**:更改为 `onBeforeUnmount` 和 `onUnmount`,强调“卸载”而非“销毁”[^3]。 #### 4. **新增生命周期钩子** - **Vue3** 新增 `onServerPrefetch`,用于服务端渲染时预获取数据(SSR),这是 Vue2 不具备的[^4]。 #### 5. **触发时机的调整** - **Vue3** 的 `setup()` 函数替代了 Vue2 的 `beforeCreate` 和 `created` 阶段。在 `setup()` 中无法直接访问 `this`,需通过响应式 API(如 `ref`、`reactive`)操作数据[^2]。 #### 6. **性能优化与响应式系统** - **Vue3** 基于 Proxy 的响应式系统减少了初始化阶段的性能消耗,生命周期整体执行效率比 Vue2 提升 1.2~2 倍[^2]。 - 钩子函数的设计更轻量,与 Composition API 深度集成,支持按需导入。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值