生命周期【钩子】

生命周期【钩子】
三个阶段：→
初始化→
运行中→
销毁
生命周期钩子不允许写成箭头函数，因为箭头函数会改变this指向
初始化
beforeCreate () {}
组件即将创建
数据未获取、真实DOM未拿到
可：数据请求、数据修改
created () {}
组件创建结束
数据拿到、真实DOM未拿到
可：数据请求、数据修改
beforeMount () {}
组件即将挂载
内部完成任务、不干预
可：数据请求、数据修改
判断组件是否有el/template选项，如果有那么使用render函数将template模板中的jsx转换成VDOM对象模型，如果没有，需要我们使用$mount/outerHTML手动挂载
mounted () {}
组件挂载结束
可操作真实DOM、可以进行第三方库实例化
可：数据请求、数据修改
将vdom渲染为真实DOM，挂载到页面中，可以在页面中看到内容
运行中
beforeUpdate
触发条件：组件数据发生改变
VDOM重新生成，然后通过diff算法和以前的VDOM比对，生成patch补丁对象 【 内部进行 】
updated 【推荐】
触发条件：组件数据发生改变
将patch补丁对象进行渲染生成真实dom
可以操作DOM 【 第三方库的实例化【 动态数据 】 】
销毁
意义：
用来完成善后工作
计算器、第三方库实例。window.onscroll…
内部销毁
组件会被销毁掉、、但是组件的DOM外壳还在
$ destroy
外部销毁
通过开关销毁【推荐】
beforeDestroy () {}
destroyed () {}
效果一样、任意选一个