生命周期理解
生命周期理解
vue生命周期即vue组件从创建到销毁的过程，通过一系列生命周期钩子函数为开发者提供了在特定阶段插入自定义逻辑的能力。
大约有四个阶段：创建、挂载、更新和销毁。每个阶段包含多个钩子函数。
注意：对于keep-alive缓存的组件，有额外的两个生命周期钩子，activated、deactivated。
创建vue实例对象:new Vue(options)
初始化实例对象:仅包含默认生命周期函数和默认事件
beforeCreate
无法访问options的任何部分，响应式系统、事件绑定均未生效。可用于插件初始化（全局状态预加载），调试。
- 初始化data、methods
created:options
初始化完成，组件未挂载。可用于数据请求、第三方库初始化、验证props。
- 编译模板：是否存在template标签，否则使用el属性（元素选择器）的元素（中的字符串）作为模板编译成render函数(调用vm.$mounted(el))。
父组件先进行模板编译，子组件后进行模板编译。
bedoreMounted
可以访问虚拟DOM，但未挂载到页面中。干预模板编译（自定义渲染器），调试虚拟dom结构。
- 生成虚拟DOM:在render函数中将虚拟DOM渲染成真实DOM
mounted
可操作真实DOM，可访问子组件（子组件的mounted早于父组件的mounted）。DOM操作，获取真实DOM信息，子组件交互（调用子组件方法）。
- 挂载完成：当数据变化之时
beforeUpdate
可访问旧数据和旧dom。记录旧状态，对比数据变化。
- 虚拟DOM重渲染：在内存中重新渲染虚拟DOM树，调用patch函数完成新旧虚拟DOM的差异计算，将差异应用到真实DOM
updated
访问更新后DOM，可能因父组件更新而触发。依赖新DOM的操作，重新计算布局、触发副作用（统计日志）。
当调用vm.$destroy之时
beforeDestroy:
访问完整的组件实例。清理资源，事件监听器、定时器、取消异步请求。解绑副作用，取消vuex的大约、断开websocket的链接。
- 清理：清理watchers、事件监听器、子组件等
- 销毁
destroyed:
实例销毁。日志记录、验证清理。
activated
被缓存的组件重新进入 DOM（如从其他页面返回）
恢复组件状态（如刷新数据、重新绑定事件）；
触发“激活”后的副作用（如重新加载最新数据）。
deactivated
被缓存的组件离开 DOM（如切换到其他页面）
暂停组件状态（如停止定时器、暂停视频播放）；
保存当前状态（如滚动位置、表单输入内容）。
父子组件渲染顺序
同步加载组件时，按模板的顺序来加载。父组件编译完模板后，加载完子组件后，再完成父组件挂载。
异步加载组件时，父组件生命周期完成后，再开始加载子组件。