1.什么是生命周期
官方定义:
任何 Vue 实例在被创建时都要经过一系列的初始化过程,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,方便让用户在不同阶段添加对应的运行代码
个人定义:
生命周期函数是指组件在某一阶段调用的函数
通过图示可以看出生命周期可以分为四个阶段和八种状态:
四个阶段:
create 创建阶段
mount 挂载阶段
update 更新阶段
destroy 销毁阶段
八种状态:
beforeCreate()方法是在实例还没有别完全创建出来之前执行,这个方法执行的时候,无论是data中的数据还是methods中的方法都没有被初始化,所有的值都为undefined
created()方法是此时已经初始化好了Vue对象,这是最早能操作data中数据和methods中方法的地方
beforeMount()这是指该模板已经在内存中编辑完成,但是尚未将其渲染到页面中去,在该方法执行期间,页面中的元素还没有经过Vue的渲染,此时的{{msg}}仍然是一个“{{msg}}”
mounted(),表示内存中的模板已经渲染到页面中去,这个时候数据已经可以经过Vue的编译,该函数是实例创建的最后一个函数,此时实例已经完全创建好了,如果没有别的操作的话,此函数就静静躺在内存中,如果要使用某些插件操作页面上的DOM,最早要在mount中操作
beforeUpdate()事件执行的时候,页面中显示的数据并没有更新,但是内存中的数据已经改变,也就是说此时页面尚未和最新的数据保持同步
update()事件执行的时候,页面中的数据已经和内存中保持一致了,也就是说此时已经是最新的了
beforeDestroy() 当执行beforeDestroy阶段时vue实例已经从运行阶段,进入到销毁阶段,但是此时项data和methods里面的属性和方法还依然可以使用
destroyed() 当执行到destroyed时组件已经完全被销毁,此时实例中所有的属性、方法、过滤器等等都已不能再去使用