vue生命周期
- Vue生命周期是指vue实例对象从创建到销毁的过程
- Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程,我们成为Vue 实例的生命周期
- vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能
beforeCreate( 创建前 ) | 组件实例创建前,在实例初始化之后,数据观测和事件配置之前被调用 此时组件的选项对象还未创建,el 和 data 并未初始化 无法访问methods, data, computed等上的方法和数据 可以在这加个loading事件 |
created ( 创建后 ) | 组件实例创建完成 dom还不存在, $el属性还不可以操作 完成了 data 数据的初始化,el没有挂载 在这结束loading,还做一些初始化,实现函数自执行 |
beforeMount( 挂载前 ) | 挂载开始之前被调用,相关的render函数首次被调用(虚拟DOM) 实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂在html到页面上,完成了 el 和 data 初始化 |
mounted( 挂载后 ) | 实例被挂载后调用 也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次 在这发起后端请求,拿回数据,配合路由钩子做一些事情 |
beforeUpdate( 更新前 ) | 在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程 |
updated( 更新后 ) | 在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用 |
beforeDestroy(销毁前) | 在实例销毁之前调用 实例仍然完全可用,这一步还可以用this来获取实例, 一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件 |
destroyed(销毁后) | 在实例销毁之后调用, 该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。 |
activated | 被 keep-alive 缓存的组件激活时调用。 |
deactivated | 被 keep-alive 缓存的组件停用时调用。 |