您的位置:首页 > Web前端 > Vue.js

vue的生命周期钩子函数

2020-01-14 00:01 330 查看

1.生命周期 (主要是组件,就有生命周期)
-意义:帮助我们更加精细的去控制组件
-概念:vue生命周期可以分为三个阶段,分别为:初始化阶段,更新阶段,销毁阶段
vue生命周期钩子函数一共有11个,重点有8个;

1.1 初始化阶段
a. 执行几次: 1次
b. 执行条件: 自动执行
c. 有几个钩子函数

  • 4个 beforeCreate
  • created
  • beforeMount
  • mounted
    d. 总结
  • beforeCreate 为实例事件和生命周期做准备
  • created 初始化数据
  • beforeMount vdom生成了
  • mounted 真实dom生成了
  • 初始化阶段是自动执行的,只要组件出现就会自动执行
  • 初始化阶段执行一次
  • created\beforeMount\mounted 都提供了一次数据修改的机会
  • 工作中,mounted 一个钩子函数就够用了
  • 1.2 更新阶段
    a. 执行次数: 多次
    b. 执行条件: 数据改变,就会执行
    c. 钩子函数

    • beforeUpdate
    • updated √
      d. 应用场景
    • 结合第三方类库使用,通过数据请求修改数据后,然后在第三方实例化
      e. 补充
    • 宏任务、微任务
    • 微任务先执行,宏任务后执行

    1.3 销毁阶段
    a. 执行几次: 可以多次
    b. 执行条件: v-if[ 外部销毁 ] / $destory() 【 内部销毁】
    c. 钩子函数: 2个

    • beforeDestroy
    • destroyed
      d. 两个钩子函数的区别: 没差别
      e. 任务: 善后的
    • 把一些vue无法自动清除的东西清除掉: 比如: 计时器、自定义事件【 滚轮事件 】

    1.4 另外三个钩子

    1. keep-alive 专用的
        activated
      • deactivated
    2. errorCaptured
        捕获子组件的错误的

    2.面试题
    如果父组件数据更新,子组件更新钩子会触发吗 不会
    如果子组件数据更新,父组件更新钩子会触发吗 会

    • 点赞
    • 收藏
    • 分享
    • 文章举报
    暖于心- 发布了8 篇原创文章 · 获赞 0 · 访问量 38 私信 关注
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: