Vue的生命周期

最新推荐文章于 2024-08-12 20:19:45 发布

Jasmine_jiamei

最新推荐文章于 2024-08-12 20:19:45 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43827779/article/details/105466302

前端专栏收录该内容

37 篇文章

订阅专栏

生命周期函数就是组件在初始化或者数据更新时会触发的钩子函数。

创建前/后

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vf9Xd8zN-1586661100229)(G:\aboutFrontEnd\学习笔记\图片\created.png)]$

在初始化时，会调用以下代码，生命周期就是通过 callHook 调用的

Vue.prototype._init = function(options) {
     initLifecycle(vm)
     initEvents(vm)
     initRender(vm)
     callHook(vm, 'beforeCreate') // 拿不到 props data
     initInjections(vm)
     initState(vm)
     initProvide(vm)
     callHook(vm, 'created')
}

在 beforeCreate 钩子函数调用的时候，是获取不到 props 或者 data 中的数据的，因为这些数据的初始化都在 initState 中。
然后会执行 created 钩子函数，在这一步的时候已经可以访问到之前不能访问到的数据，但是这时候组件还没被挂载，所以是看不到的。实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。

然后：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dMMt2QN-1586661100231)(G:\aboutFrontEnd\学习笔记\图片\beformounted.png)]$

挂载前/后

接下来会执行挂载函数 :

export function mountComponent {
     callHook(vm, 'beforeMount')
     // ...
     if (vm.$vnode == null) {
     vm._isMounted = true
     callHook(vm, 'mounted')
     }
}

beforMounted:挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
mounted:挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。将 VDOM渲染为真实 DOM 并且渲染数据。组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件全部挂载完毕，才会执行根组件的挂载钩子。