Vue的生命周期就是:
Vue实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载DOM到渲染、更新到渲染、销毁等一系列过程,它主要分为八个阶段:
beforeCreate (创建前):
初始化vue实例,进行数据观测,此时组件的选项对象还未创建,el 和 data 未初始化,因此无法访问methods,data,computed,watch等上的方法和数据。
created (创建后):
组件初始化完毕,当前阶段已经完成了数据观测、属性和方法的运算,完成了data 数据的初始化,el没有。常用于异步数据获取。
beforeMount(挂载前):
当前阶段虚拟dom已经创建完成,实例已完成编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,但此时还没有挂载html到页面上。
mounted(挂载后):
初始化结束,真实dom已创建,数据完成双向绑定,可用于获取访问数据和dom元素,使用refs的属性对dom进行操作(此阶段尽量避免操作dom)。
beforeUpdate(更新前):
在当前阶段进行更改数据不会造成重复渲染。此时,数据是新的,但页面是旧的,页面和数据尚未保持同步。
updated(更新后):
所有状态已是最新,避免在此期间更改数据,因为这可能会导致更新无限循环。data里的变量改变并且要在页面重新渲染完成之后,就会触发updated生命周期。
beforeDestroy(销毁前):
在当前阶段,实例完全可以被使用,可用于一些定时器或订阅的取消。但是所有对数据的修改不会触发更新了。
destroyed(销毁后):
这时候只剩下dom空壳,组件已经被拆解,数据绑定被卸载,监听被移除,子实例也被销毁了。
最后说说在created和mounted中获取数据的区别:
created是在组件实例一旦创建完成的时候立刻调用,即通常初始化某些属性值,然后再渲染成视图,这时候页面dom节点并未生成。
mounted是在页面dom节点渲染完成之后就立刻执行的,可以直接操作dom节点,created的触发时机要比mounted更早一些。
一般情况下都放到mounted中,保证逻辑的统一性,因为生命周期是同步执行的,ajax是异步执行的;但是服务端渲染(SSR)不支持mounted方法,所以在服务端渲染的情况下统一放到created中。