1.生命周期图示

图片说明
图片说明

1.1 初始化阶段

从new Vue()到created之间的阶段叫作初始化阶段。这个阶段主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据,如props、methods、data、computed、watch、provide和inject等。

1.2 模板编译阶段

在created钩子函数与beforeMount钩子函数之间的阶段是模板编译阶段。这个阶段的主要目的是将模板编译为渲染函数,只存在于完整版中。运行时版本已经预编译成渲染函数,所以不存在这个阶段。

1.3 挂载阶段

beforeMount钩子函数到mounted钩子函数之间是挂载阶段。这个阶段,Vue.js会将其实例挂载到DOM元素上,就是将模板渲染到指定的DOM元素中,并且在挂载的过程中,会持续开启Watcher来持续追踪依赖的变化。当数据(状态)发生变化时,Watcher会通知虚拟DOM重新渲染视图,并且会在渲染视图前触发beforeUpdate钩子函数,渲染完毕后触发updated钩子函数。

1.4 销毁阶段

应用调用vm.$destroy方法后,Vue.js生命周期会进入销毁阶段。
这个阶段Vue.js会将自身从父组件中删除,取消实例上所有依赖的追踪并且移除所有的事件监听器,再准备销毁时正式销毁之前会触发beforeDestroy钩子函数,已销毁完毕的时候触发destroyed钩子函数。