vue生命周期详解

1. 生命周期

什么是vue的生命周期?

一个组件从 创建销毁 的全过程就是生命周期

Vue的生命周期

 

 2. 钩子函数

vue框架内置函数,伴随着组件的生命周期阶段,自动执行

作用: 特定的时间点,执行特定的操作

使用场景: 组件创建完成完毕后,可在created生命周期函数中发起Ajax请求,从而初始化 data 数据

分类: 四大阶段8个方法

钩子函数的分类
阶段方法名方法名
初始化beforeCreatecreated
挂载 beforeMountmounted
更新beforeUpdateupdated
销毁beforeDestroydestroyed

 vue生命周期官方文档:官网文档

下图展示了实例的生命周期

 2.1 初始化阶段

1. new Vue() – Vue实例化(组件也是一个小的Vue实例)

2. Init Events & Lifecycle – 初始化事件和生命周期函数

3. beforeCreate – 生命周期钩子函数被执行

4. Init injections&reactivity – Vue内部添加data和methods等

5. created – 生命周期钩子函数被执行, 实例创建

6. 接下来是编译模板阶段 –开始分析

7. Has el option? – 是否有el选项 – 检查要挂到哪里

        1. 没有. 调用$mount()方法

        2. 有, 继续检查template选项

注意:

 Vue实例从创建到编译模板执行了beforecreatecreated钩子函数

  1. created不能获取DOM元素,但是能触发获取data
  2. beforecreate 获取不到data,得到的值是undefined

 2.2 挂载阶段

1. template选项检查

        1. 有 - 编译template返回render渲染函数

        2. 无 – 编译el选项对应标签作为template(要渲染的模板)

2. 虚拟DOM挂载成真实DOM之前

3. beforeMount – 生命周期钩子函数被执行

4. Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5. 真实DOM挂载完毕

6 .mounted – 生命周期钩子函数被执行

注意:

  1. beforeMount在真实DOM挂载之前触发,拿不到DOM元素
  2. mounted在真实DOM挂载之后触发,能拿到DOM元素

beforeMount 预处理data 不会触发updated钩子函数

2.3  更新阶段

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

2.4 销毁阶段

1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2.beforeDestroy – 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例销毁后, 最后触发一个钩子函数

5.destroyed – 生命周期钩子函数被执行

完结...

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个流行的 JavaScript 框架,它有一套完整的生命周期钩子函数,用于在组件的不同阶段执行特定的操作。下面是 Vue 组件的生命周期钩子函数及其对应的阶段: 1. beforeCreate: 在实例被创建之前调用,此时 data 和 methods 等属性还未初始化。 2. created: 在实例创建完成后调用,此时可以访问 data 和 methods,并可以进行一些初始化操作。 3. beforeMount: 在编译模板之前调用,此时模板还未被渲染成真实的 DOM。 4. mounted: 在编译模板之后调用,此时模板已经被渲染成真实的 DOM,并且可以进行 DOM 操作。 5. beforeUpdate: 在数据更新之前调用,此时可以进行一些更新准备工作。 6. updated: 在数据更新之后调用,此时 DOM 已经被更新。 7. beforeDestroy: 在实例销毁之前调用,此时实例仍然可用。 8. destroyed: 在实例销毁之后调用,此时实例及其所有的监听器都已被移除。 下面是一个简单的示例代码,演示了 Vue 组件的生命周期函数的使用: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Lifecycle Demo</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello, Vue!' }, beforeCreate() { console.log('beforeCreate hook') }, created() { console.log('created hook') }, beforeMount() { console.log('beforeMount hook') }, mounted() { console.log('mounted hook') }, beforeUpdate() { console.log('beforeUpdate hook') }, updated() { console.log('updated hook') }, beforeDestroy() { console.log('beforeDestroy hook') }, destroyed() { console.log('destroyed hook') } }) </script> </body> </html> ``` 你可以在浏览器中打开该示例,然后在控制台中查看不同生命周期阶段的输出信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值