组件的生命周期
生命周期(life Cycle)是指一个组件从创建→运行→销毁的整个阶段,强调的是一个时间段。
我想?
组件创建完成做一件事情?
组件刚开始创建时做一件事情?
生命周期帮助我们卡时间
生命周期函数是由vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。
组件生命周期函数的分类
创建一个组件时,将会从左到右依次执行
beforeCreate:创建之前
created:创建之后
beforeMount:渲染之前
Mounted:渲染之后
beforeUpdate:更新之前
updated:更新之后
deforeDestroy:销毁之前
Destroyed:销毁之后
生命周期图示
https://cn.vuejs.org/v2/guide/instance.html#
new Vue() : new一个vue的构造函数。
Init Event&Lifecycle(初始化事件和生命周期函数): 组件的props(属性)/data(数据源)/methods(方法)尚未被创建,都处于不可用状态。
beforeCreate(): 组件创建之前
Init injections&reactivity(初始化和): 初始化组件的props(属性)/data(数据源)/methods(方法)
created: 组件的props/data/methods已经创建好,都处于可用状态,但是组件的模板结构尚未生成。仅数据可用,不能操作DOM。常用于发起Ajax请求来拿数据,
Has ‘el’ option?: 是否有el指向。
when vm.$mount(el) is called: 当vm.$mount(el)被调用
Has ‘template’ option?: 是否有template指向。
Compile el’s outerHTML as template: 编译el当作模板进行编译
Compile template into render function: 编译template
这部分阶段就是基于数据和模板在内存中编译生成HTML结构
beforeMount: 将要把内存中编译好的HTML结构渲染到浏览器中,此时浏览器中还没有当前组件的DOM结构
Create vm.$el and replace ‘el’ with it: 用内存中编译生成的HTML结构,替换掉el属性指定的DOM元素
mounted: 已经把内存中的HTML结构,成功的渲染到了浏览器之中,此时浏览器已经包含当前组件的DOM结构。
beforeUpdate: 将要根据变化后、最新的数据,重新渲染组件的模板结构。
Virtual DOM re-render and patch: 根据最新的数据,重新渲染组件的DOM结构。
updated: 已经根据最新的数据,完成了组件DOM结构的重新渲染
beforeDestroy: 将要销毁此组件,此时尚未销毁,组件还处在正常工作的状态
Teardown wathers,child components and event listeners: 销毁当前组件的数据侦听器,子组件,事件监听。
destroyed: 组件已经被销毁,此组件在浏览器中对应的DOM结构已被完全移除