对于 Vue 生命周期的解析
beforecreated mounted updated destroy
各大周期:
beforeCreate(初始化界面前)
created(初始化界面后)
beforeMount(渲染 dom 前)
mounted(渲染 dom 后)
beforeUpdate(更新数据前)
updated(更新数据后)
beforeDestroy(卸载组件前)
destroyed(卸载组件后)
1 beforeCreate 和 created 钩子函数之间的生命周期
进行初始化事件,暴露一些方法,最重要的是进行数据劫持,对data属性的数据进行绑定
当data中属性值改变时,更新视图
2 created 钩子函数和 beforeMount 间的生命周期
首先判断有无el选项,如果有的话就继续向下编译,如果没有则停止编译,直到调用vm.$mount(el)
el是一个选择器,vue实例需要用这个el去template中寻找对应
然后,判断有无template参数,进行编译
(1)如果有 template 参数,则将其作为模板调用 render 函数进行编译
(2)如果没有 template 参数,尝试将外部 HTML 作为模板编译,如果也没有,则报错停止周期
(3)也可以直接调用 render 函数编译
此时编译后,并没有对vue命令进行compile,即还未对{{}},v- 等命令进行处理
3 mounted
进行 {{}},v- 等命令的处理,获取data初始值渲染试图
4 beforeUpdate 钩子函数和 updated 钩子函数间的生命周期
当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdate和updated钩子函数
5 beforeDestroy 和 destroyed 钩子函数间的生命周期
beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,
所有的事件监听器会被移除,所有的子实例也会被销毁。
生命周期图: