vue 生命周期就是vue实际从创建到销毁的过程,即从创建,初始化数据,编译模版,挂载dom到渲染,更新渲染,销毁等一系列过程,他主要分为8个阶段,创建前后,挂载前后,更新前后,销毁前后,接着我再详细讲一下各个生命周期钩子函数作用:
beforeCreate 执行时组件实例还未创建,通常用于插件开发中执行一些初始化任务; created 组件初始化完毕,各种数据可以使用,通常用于异步数据获取; beforeMount 发生在挂载前,可以对数据进行更改但是不会渲染到页面上; mounted 挂载元素,获取到 DOM 节点,此时用户可以在浏览器上看到页面内容了; beforeUpdate 发生在状态或者数据更新前,可用于获取更新前各种状态; updated 状态已更新,这个时候要避免在这个阶段进行更改数据,可能会陷入死循环,可以用计算属性或者 watcher 进行状态改变; beforeDestroy 发生在实例销毁前,销毁前需要清楚定时器清楚缓存之类的; destroyed 组件已销毁,这个时候 vue 实例已不存在,所有的子实例也被销毁,所有的指令被解绑,事件监听被移除;
其中在获取数据时,created和 mounted的区别:
created 是在组件实例一旦创建完成时立即调用,这时候页面 don 节点并未生成,mounted 是在页面 don 节点渲染完毕之后立即执行的,created 的触发时机要比 mounted 更早一些;两者的相同点是都能拿到实例对象的属性和方法,但是如果放在 mounted 请求,有可能导致页面闪动,但如果在页面加载前完成则不会出现此情况;