Vue的生命周期
vue生命周期是指vue中实例或组件从创建到消灭经过的一系列过程。
一 初始化阶段
new Vue({}) 或者是 new VueComponent({}):实例化一个vm或者组件实例 init:初始化实例,比如事件系统和生命周期激活等等
1.1 beforeCreate
执行的节点是: 数据代理和数据劫持之前（ 不能获取到任何数据 ） 注入所有的配置(数据劫持、数据代理、计算属性、方法、事件/侦听器的回调函数)
1.2created
执行的节点是: 数据代理和数据劫持之后（ 可以获取到数据 ） 可以访问到data里的数据和methods里的方法
模板编译阶段
- 判断有没有el选项,如果有则继续判断是否有template,如果没有则看一下有没有$mount挂载,然后再走判断是否template(判断是否有容器进行挂载)
- 判断是否有template配置向 如果有,则使用render函数对模板进行编译为VNode 如果没有,则把容器(el)的outerHTML作为模板,编译为VNode
二 挂载阶段
2.1 beforeMount
真实DOM挂载之前 (此时页面呈现的是原始el容器的DOM元素,这个节点不能操作DOM) 挂载的过程:把虚拟DOM转为真实DOM(vm.el),并且把vm.el(Vue 实例使用的根 DOM 元素)替换原始模板中的el
2.2 mounted
真实DOM挂载之后 此时页面呈现的是真正的DOM,此时实例的所有初始化已经结束,在这个生命周期中就可以进行初始化操作 (开启定时器,订阅,绑定自定义事件,发送初始化数据请求))
三 更新阶段
数据发生变化之后进入更新阶段
3.1 beforeUpdate
DOM更新之前 (视图未更新) 此时数据是最新的 但是视图是旧的
3.2 Updated
DOM更新之后 根据更新的数据生成新的虚拟DOM 经过diff算法 更新视图
四 销毁阶段
销毁的方式: v-if 路径切换
4.1 beforeDestroy
进行收尾工作 若该页面开启了定时器 定时器不会随着组件销毁而停止 需要手动停止定时器
4.2 destroyed
知道有这个就行
父子组件生命周期执行顺序
初始化阶段&挂载阶段
父beforeCreate ↓ 父created ↓ 父beforeMount ↓ 子beforeCreate ↓ 子created ↓ 子beforeMount ↓ 子mounted ↓ 父mounted
更新阶段
更新阶段分为两种情况
- 父子组件更新的数据互相影响
父beforeUpdate ↓ 子beforeUpdate ↓ 子updated ↓ 父updated
- 父子组件若不相关 不影响 各自更新各自的
销毁阶段
父beforeDestroy -> 子beforeDestroy -> 子Destoryed -> 父Destroyed
生命周期补充
以上说明的生命周期流程是完整版Vue的流程图(拥有模板编译的vue版本)
runtime版本的vue是没有模板编译阶段!!!!!因为webpack中配置的vue-loader,会把vue内部的模板在构建阶段直接编译为了渲染函数,所以runtime版本在生命周期的模板编译阶段是不存在的,而是在挂载时直接调用渲染函数即可
什么是runtime版本?? vue分为完整版和运行版 完整版就是在线引入vue.js文件的 有编译器 运行版就是runtime版本 不包含vue的模板编译器 vue开发都使用vue全家桶，而解析模板的任务就交给 vue-loader 在项目build的时候就解析成了render函数的形式，所以不需要编译器。vue pageage.json 中默认导出的就是vue.runtime.common.js 版本
