标签：el 周期 render 初始化 vuejs2.0 vm 组件 声明 函数

一、声明周期图例

 

 

 图片来源：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

 

标签：el,周期,render,初始化,vuejs2.0,vm,组件,声明,函数
来源： https://www.cnblogs.com/Walker-lyl/p/14326149.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。