首页 > Web开发 > 详细

vuejs2.0声明周期

时间:2021-01-25 18:56:11      阅读:24      评论:0      收藏:0      [点我收藏+]

一、声明周期图例

技术分享图片

 

 

 图片来源:https://www.jianshu.com/p/d61f55da98fb?from=timeline

 

 

 

二、分析

1、new Vue()

创建vue实例,其实就是调用 _init() 对实例vm上一系列属性进行初始化,期间在初始化的不同时间穿插调用声明周期钩子函数

 

2、beforeCreate

此时组件的props、methods、data、computed、watchd,DOM结构没初始化,什么也做不了

我们此时可以访问到$parent、$children、$createElement

 

在beforeCreate之前主要调用如下三个函数

initLifecycle:确定父子组件关系,对vm的$children、$parent进行初始化赋值

initEvents:将父组件注册到子组件上的自定义事件添加到子组件vm._events中

initRender:渲染相关的一些属性和方法的处理,比如比如render函数的参数$createElement

 

3、created

此时组件的props、methods、data、computed、watc可用,但是DOM结构仍然没有初始化,此时可以发起ajax请求

 

在created之前主要调用如下三个函数

initInjections:初始化inject,使得子孙组件可以访问到父组件注入的依赖

initState:初始化我们常用的状态,props、methods、data、computed、watch

initProvide:初始化Provide,使得父组件可以向子孙组件注入依赖

 

4、beforeMount

挂载前,也就是调用vm.$mount()之前

此时模板编译完成,但只是存在于内存中,并没有替换渲染到真正页面上,此时我们看不到页面

 

在beforeMount之前过程:

1)先判断$options中有没有$el属性

如果有$el,则直接自动调用vm.$mount($el)

如果没有$el,则需要我们手动调用vm.$mount($el)进行挂载

 

2)看$options中有没有template模板

如果有template,则将template编译到render函数中

如果没有template,则就使用$el.outerHTML作为模板,然后将其编译到render函数中

优先级:template > $el.outerHTML

 

3)看有没有指定的自定义render函数

如果有render函数,则使用自定义的render函数

如果没有render函数,则使用默认生成的render函数

 

 

vue的挂载是什么?

将组件渲染,并且构造 DOM 元素然后塞入页面的过程称为组件的挂载

 

 

 

 

-----smile

 

vuejs2.0声明周期

原文:https://www.cnblogs.com/Walker-lyl/p/14326149.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!