lime2019的小窝

vuePress-theme-reco lime2019    2019 - 2020
lime2019的小窝 lime2019的小窝

Choose mode

  • dark
  • auto
  • light
首页
分类
  • VuePress
  • Shell
  • 前端
  • Node.js
  • JavaScript
  • 专利
  • nodejs
  • R
  • 计算机基础
  • 网络安全
  • OpenCV
  • serverless
  • SDK
  • 前端工程化
  • 网页开发
  • QQ小程序
  • 项目部署
  • MySQL
  • ECS
  • 软件安装
  • Windows开发
  • 开发环境
  • 云开发
  • 腾讯云
标签
构建开发环境
  • 服务器软件安装
  • Windows软件安装
学习
  • QQ小程序开发
  • 腾讯云·Web云开发训练营
  • 腾讯云·微信小程序云开发训练营
项目开发
  • IGEM Wiki项目开发
  • 大创项目开发
关于我
工具网站
  • 镜像网站

    • 阿里云官方镜像网站
    • 清华大学开源软件镜像站
  • 站长相关

    • 百度统计
  • 实用工具

    • ProcessOn
    • 改图宝
  • 前端设计相关

    • 墨刀
    • Canva
    • 渐变色调色板:CoolHue
时间轴
我的
  • 我的其他博客

    • CSDN
    • 阿里云社区
  • 我的开源项目

    • Gitee
    • GitHub
  • 博客备用站点

    • Gitee Pages备用地址
    • GitHub Pages备用地址
author-avatar

lime2019

44

文章

34

标签

首页
分类
  • VuePress
  • Shell
  • 前端
  • Node.js
  • JavaScript
  • 专利
  • nodejs
  • R
  • 计算机基础
  • 网络安全
  • OpenCV
  • serverless
  • SDK
  • 前端工程化
  • 网页开发
  • QQ小程序
  • 项目部署
  • MySQL
  • ECS
  • 软件安装
  • Windows开发
  • 开发环境
  • 云开发
  • 腾讯云
标签
构建开发环境
  • 服务器软件安装
  • Windows软件安装
学习
  • QQ小程序开发
  • 腾讯云·Web云开发训练营
  • 腾讯云·微信小程序云开发训练营
项目开发
  • IGEM Wiki项目开发
  • 大创项目开发
关于我
工具网站
  • 镜像网站

    • 阿里云官方镜像网站
    • 清华大学开源软件镜像站
  • 站长相关

    • 百度统计
  • 实用工具

    • ProcessOn
    • 改图宝
  • 前端设计相关

    • 墨刀
    • Canva
    • 渐变色调色板:CoolHue
时间轴
我的
  • 我的其他博客

    • CSDN
    • 阿里云社区
  • 我的开源项目

    • Gitee
    • GitHub
  • 博客备用站点

    • Gitee Pages备用地址
    • GitHub Pages备用地址

Vue2与Vue3的生命周期函数

vuePress-theme-reco lime2019    2019 - 2020

Vue2与Vue3的生命周期函数

lime2019 2020-10-18 JavaScriptVue.js

# Vue 2.x 生命周期

See More

各生命周期钩子函数:

  • beforeCreate()(创建前),在实例初始化之后,数据观察 (data observer)和 event/watcher 事件配置之前被调用。
  • created()(创建后),在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观察 (data observer),属性和方法的运算,watch/event 事件回调。这时,挂载阶段还没开始,$el 属性目前尚不可用。
  • beforeMount()(载入前),在挂载开始之前被调用,相关的 render 函数首次被调用,该钩子函数在服务器渲染期间不被调用。
  • mounted()(载入后),实例被挂载后调用,这时 $el 被新创建的 vm.$el 替换了。 如果根实例挂载到了一个文档内的元素上,当 mounted() 被调用时 vm.$el 也在文档内。
  • beforeUpdate()(更新前),是在 DOM 树生成之前、虚拟 DOM 树生成之后调用,调用条件是这个 vm 实例已经mounted()过。该钩子函数在服务器渲染期间不被调用。
  • updated()(更新后),由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
  • beforeDestroy()(销毁前),实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed()(销毁后),实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

# Vue 3.0 生命周期

beforeCreate() 和 created() 均被 setup() 替代了;

被重命名的钩子函数:

  • beforeMount() -> onBeforeMount()
  • mounted() -> onMounted()
  • beforeUpdate() -> onBeforeUpdate()
  • updated() -> onUpdated()
  • beforeDestroy() -> onBeforeUnmount()
  • destroyed() -> onUnmounted()

新增两个debug钩子函数:(这两个函数都会接收一个 DebuggerEvent 作为参数)

  • onRenderTracked()
  • onRenderTriggered()

因为 Vue3.0 是兼容 Vue2.x 的语法的,所以为了保证 Vue2.x 的语法能够在 Vue3.x 中使用运行,大部分 Vue2.x 的回调函数还是被保留的。但beforeDestroy()和destroyed()函数被停用了。

如果在 Vue 3.0 中混合使用 Vue 2.x 的回调函数时,Vue 3.x 的生命周期会优先于 Vue2.x 的执行。

当前Vue 3.0 中,生命周期函数的调用顺序为:

1.setup
2. onRenderTracked
3. onBeforeMount
4. onMounted
5. mounted
6. onRenderTriggered
7. onRenderTracked
8. onBeforeUpdate
9. onUpdated
10. onBeforeUnmount
11. onUnmounted
1
2
3
4
5
6
7
8
9
10
11