vue的生命周期分为8个阶段:beforecreate created beforemount mounted beforeupdate updated beforedestroy destroyed
beforeCreate:在实例初始化之后,数据观察和事件配置前被调用,主要用于初始化数据,进行非响应式数据处理
created:实例创建完成后立即被调用,实例已经完成数据检测,属性和方法的运用以及建立dom节点,但还没有被挂载在页面。可以进行一些如发送请求获取数据,进行事件监听等操作。
beforeMount:模板已经编译完成,在实例挂载至页面之前被调用,尚未将模板渲染至页面,这个时候可以进行dom操作或访问渲染虚拟的dom
mounted:模板已经渲染至页面,可任意进行dom操作,进行定时器,绑定第三方插件等
beforeUpdate:数据更新前被调用,发生虚拟dom重新渲染和补丁前,通常用来做一些准备工作,或者去保存一些需要在更新后恢复的状态。
updated:已经重新渲染和打补丁,可以进行基于更新后的操作,比如获取更新后dom元素获取,进行动画效果等
beforeDestroy:在组件被销毁之前调用,此时实例完全还可以用,通常这个阶段来做一些清理工作,比如清理定时器,事件监听,解除自定义事件
destroyed:实例销毁之后被调用,这个时候实例所有的指令已经被解除,监听器移除,子实例被销毁。这个时候通常来清理一些与实例相关的资源和进行一些最后的资源操作,如通知服务器进行资源释放。
vue2从代码到渲染结束的整个流程:
1,创建vue实例,进行各种初始化操作,合并选项,初始化数据,方法,计算属性等
2,模板编译,将vue中实例模板编译成渲染函数render function
3,进行数据响应式处理,利用object.defineproperty()对数据进行数据劫持,为其绑定getter/setter方法
4,执行beforeCreate生命周期函数
5,注入依赖,初始化事件系统,进行组件依赖注入,全局依赖注入组件中,初始化事件系统
6,执行created生命周期函数,实例已经完成数据观测,属性和方法的运算,但未挂载至页面上
7,模板渲染,vue将生成的虚拟dom渲染为真实的dom,并建立dom和虚拟dom之间的关系
8,执行beforeMount生命周期函数
9,实例挂载,将真实的dom渲染挂载至指定的目标位置
10,执行mounted生命周期函数
11,数据更新,当数据发生变化,vue会进行数据更新,触发对应属性的setter函数生成更新虚拟dom
12,执行beforeUpdate生命周期函数
13,虚拟dom对页面进行重新渲染和打补丁,根据最新的数据更新虚拟dom,并进行对比,进行最小化ndom操作
14,执行updated生命周期函数
15,执行beforeDestroy生命周期函数
16,实例销毁,调用$destroy函数,解除dom关联,自定义事件,移除事件监听
17,执行destroyed生命周期函数