Vue的生命周期

什么是生命周期?

  1. 什么是生命周期呢?

    当前组件在创建到销毁经历的一系列过程,称之为生命周期

  2. 生命周期的分为几个阶段?每个阶段有哪些钩子函数
    生命周期分为3个阶段,这三个阶段分别是: 初始化 、 运行中 、 销毁
    初始化阶段:有4个钩子函数 , 触发条件是自动的

  • beforeCreate

    组件即将创建,进行组件事件和生命周期的初始化

    • 项目中一般不使用
    • 有的开发者也会在这里进行数据请求
      created
    1. 组件创建完成
    2. 项目中:
      1) 异步请求接口数据
      2) 数据修改
  • beforeMount

  1. 组件即将挂载
  2. 判断根实例组件是否有el选项,如果没有,那么手动挂载,判断根实例组件中的其他子组件是否有template选项,如果没有,那么使用outerHTML插入
  3. 项目中:
    1) 异步请求接口数据
    2) 数据修改

mounted

  1. 组件挂载结束

  2. 使用真实DOM替换VDOM

  3. 项目中
    1) 异步请求接口数据
    2) 数据修改
    3) 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) )

    总结: 初始化过程中在项目中使用
    数据请求:created
    DOM操作: mounted
    数据修改: beforeMount created mounted

运行中阶段:有2个钩子函数

触发条件是: 当data选项中的数据发生改变时

beforeUpdate:
内部操作 : vdom生成和diff的对比
我们可以不使用

updated
Rdom已经生成,可以进行异步数据请求得到的dom渲染的第三方库实例化

销毁阶段: 有2个钩子函数

beforeDestory: 组件即将销毁,准备调用 $destroy() 方法
destoryed: 组件销毁结束

这两个钩子函数没有什么去别,功能很相似

 项目中: 
这两个钩子函数都可以用来做善后,把一些计时器,第三方库实例化出来的实例

 组件销毁的两种方式: 
1. 使用$destroy()方法(内部销毁)
缺点: 会将组件的模板也保留下来
2. 使用开关销毁(外部销毁)
            v-if
            这种类型的销毁不会留有模板

有一个钩子函数可以不写,这个钩子函数就是我们  render  函数 
  1. 生命周期中钩子函数的触发条件是什么?

  2. 项目中如何使用?

  3. 名词解释:钩子函数

    钩子函数就是options配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发

  4. 除了根实例组件以外,其他的组件中的数据项 data 必须是一个函数,而且这个函数必须返回一个对象
    为什么是函数呢?
    原因:我们希望组件的数据是独立的,有一定作用域的
    为什么返回值是对象?
    原因: 是为了符合 数据驱动 原理设计,让observer将data选项中的数据设置 getter 和 setter

  5. 其他选项写在生命周期的上

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值