Vue生命周期函数

Vue的生命周期及其相应的三个阶段解读
1、生命周期的概念:

​ vue中的生命周期指的是 组件 从创建到销毁一个过程,在这个过程中,我们在每一个特定的阶段会触发一些方法( 这些方法具备一些功能),我们给这些方法起了个名字叫做 生命周期钩子函数(组件钩子 )。

2、为什么要学习生命周期?

​ 因为我们想在生命周期钩子中实现项目功能,那么我们必须知道每一个钩子函数的具体用途。

3、Vue生命周期的三个阶段:

​ Vue的生命周期分为三个阶段,分别为: 初始化,运行中 和 销毁,一共8个钩子函数。

注意: 生命周期钩子函数不允许写成箭头函数,因为这里使用箭头函数就会改变this的指向

​ -------------------------- 1初始化------------------------------

​ beforeCreate

​ 1. 组件创建前触发,任务是为了组件的生命周期 和 组件中的事件做准备

​ 2. 数据没有获得,真实dom也没有渲染出来

​ 3. 可以进行数据请求,提供了一次数据修改的机会

​ 4. 执行一次

​ created

​ 1. 组件创建结束,任务是数据注入和反应

​ 2. 数据得到了(如果修改了数据,这里得到的也是旧数据),真实dom没有渲染出来

​ 3. 可以进行数据请求,提供了一次数据修改的机会

​ 4. 执行了一次

​ beforeMount

​ 1. 组件挂载前

​ 2. 任务: 判断el 和 template

​ 如果el没有,那么我们需要手动挂载new Vue().$mount(’#app’),如果有,那么判断template

​ 如果template有,那么进行render函数,将template即jsx转成vdom

​ 如果template没有,那么通过 outerHTML 手动书写模板

​ 3. 数据可以获得(旧数据),但是真实dom还没有渲染

​ 4. 可以进行数据请求,也提供了一次数据修改的机会

​ 5. 执行一次

​ mounted

​ 1. 组件挂载结束,任务是将vdom渲染成真实dom,然后挂载到页面

​ 2. 数据获得了(旧数据),真实dom也获得了

​ 3. 可以进行数据请求,也可以修改数据

​ 4. 执行了一次

​ 5. 可以进行真实dom的操作了( 可以进行第三方库静态数据的实例化了 )

​ 综上总结:

​ 1. 数据请求一般写在created里面(因为这里第一次得到数据)

​ 2. 第三方库实例化我们一般会往mounted中写(静态的数据)

​ -------------------------- 2运行中------------------------------

​ 触发条件:数据更新

​ beforeUpdate

​ 1. 更新前

​ 2. 任务是重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象

​ 3. 这个钩子函数更多的是内部进行一些操作,我们就不再多干预了

​ 4. 可以触发多次

​ updated

​ 1. 更新结束,任务是将patch对象渲染成真实dom

​ 2. 真实dom得到了,数据也得到了( 更新后的新数据)

​ 3. 动态数据获取( 第三方库实例化 )

​ -------------------------- 3销毁------------------------------

Vue的销毁有两种形式

​ 1. 通过开关的形式

​ 2. 通过调用 $destroy 方法(这种还需要手动销毁dom外壳)

​ -------------------- vue生命周期的销毁阶段 -------------------

​ 触发条件: 当组件销毁时:

​ beforeDestroy

​ destroyed

​ 这两个钩子功能一致的,这两个钩子没有太大的区别

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值