生命周期流程
完整的生命周期
详细描述
生命周期函数
创建 -> 前后： （beforeCreate, created）
挂载 -> 前后： （beforeMount, mounted）
更新 -> 前后： （beforeUpdate, updated）
销毁 -> 前后： （beforeDestroy, destroyed）
常用的生命周期函数
- created
- Vue中
data的数据和methods的方法已可以使用 - data属性，methods属性，watch监听等都初始化好了，也就是可以使用了。
- Vue中
- mounted
- 开启定时器
- 发送ajax请求
- 订阅消息
- 绑定自定义事件
- 已经把内存中编译好的模板替换到页面中，也就是视图层已渲染成最新的，vue 实例完全创建完毕。可以操作DOM，但不保证所有子组件都挂载了。
- beforeUpdate
- 清除定时器
- 取消订阅、事件监听
- 解绑自定义事件
vue实例销毁
- vue开发者工具的数据为空
- 销毁后自定义事件失效
- 不要在beforeDestroy进行数据的操作，不会再走更新流程
Vue生命周期经历哪些阶段：
- 总体来说：初始化、运行中、销毁
- 详细来说：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过
程
生命周期经历的阶段和钩子函数:
- 实例化vue(组件)对象：new Vue()
- 初始化事件和生命周期 init events 和 init cycle
- beforeCreate函数：
- 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。即此时vue（组件）对象被创建了，但是vue对象的属性还没有绑定，如data属性，computed属性还没有绑定，即没有值。
- 此时还没有数据和真实DOM。
- 即：属性还没有赋值，也没有动态创建template属性对应的HTML元素（二阶段的createUI函数还没有执行）
- 挂载数据（属性赋值）
- 包括 属性和computed的运算
- Created函数：
- vue对象的属性有值了，但是DOM还没有生成，$el属性还不存在。
- 此时有数据了，但是还没有真实的DOM
- 即：data，computed都执行了。属性已经赋值，但没有动态创建template属性对应的HTML元素，所以，此时如果更改数据不会触发updated函数
- 如果：数据的初始值就来自于后端，可以发送ajax，或者fetch请求获取数据，但是，此时不会触发updated函数
- 检查
- 检查是否有el属性
- 检查vue配置，即new Vue{}里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用 vm.$mount()完成了全局变量$el的绑定
- 检查是否有template属性
- 检查配置中的template项，如果没有template进行填充被绑定区域，则被绑定区域的el对outerHTML（即 整个#app DOM对象，包括所在的标签，以及里面的所有标签）都作为被填充对象替换掉填充区域。
- 如果vue对象中有 template属性，那么，template后面的HTML会替换$el对应的内容。如果有render属 性，那么render就会替换template。 即：优先关系： render > template > el
- beforeMount函数：
- 模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数
此时 this.$el有值，但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换
- 模板编译：
- 用vue对象的数据（属性）替换模板中的内容
- Mounted函数：
- 模板编译完成，数据挂载完毕
- 即：此时已经把数据挂载到了页面上，所以，页面上能够看到正确的数据了。
一般来说，我们在此处发送异步请求（ajax，fetch，axios等），获取服务器上的数据，显示在DOM里。
- beforeUpdate函数：
- 组件更新之前执行的函数，只有数据更新后，才能调用（触发）beforeUpdate，注意：此数据一定是在模板上出现的数据，否则，不会，也没有必要触发组件更新（因为数据不出现在模板里，就没有必要再次渲染）
- 数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前
- Updated函数：
- 组件更新之后执行的函数
- vue（组件）对象对应的dom中的内部（innerHTML）改变了，所以，叫作组件更新之后
- activated函数：keep-alive组件激活时调用
- activated函数：keep-alive组件停用时调用
- beforeDestroy函数：vue（组件）对象销毁之前
- destroyed函数：vue组件销毁后
keep-alive
包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。 解析： 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用
进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染
问： 说一说 vue keep-alive 参考博客
答：
- keep-alive： keep-alive 可以实现组件缓存，是Vue.js的一个内置组件
作用：
- 它能够把不活动的组件实例保存在内存中，而不是直接将其销毁
- 它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中
使用方式：
- 常用的两个属性 include/exclude ，允许组件有条件的进行缓存。
- 两个生命周期 activated/deactivated ，用来得知当前组件是否处于活跃状态。
- keep-alive的中还运用了 LRU(Least Recently Used) 算法。
问：vue生命周期中异步加载在mouted还是create里实现 ？ 参考答案
答：
- 最常用的是在created钩子函数中调用异步请求
解析：
- 一般来说，在，created，mounted中都可以发送数据请求，但是，大部分时候，会在created发送
请求。 - Created的使用场景：如果页面首次渲染 就来自后端数据。
- 因为，此时data已经挂载到vue实例了。在 created（如果希望首次选的数据来自于后端，就在此处发请求）（只发了异步请求，渲染是在后端响应之后才进行的）、beforeMount、mounted（在mounted中发请求会进行二次渲染） 这三个钩子
函数中进行调用。因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是最常用的是在
created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有两个优点：- 第一点：能更快获取到服务端数据，减少页面 loading 时间；
- 第二点：放在 created 中有助于一致性，因为ssr 不支持 beforeMount 、mounted 钩子函数。
- 因为，此时data已经挂载到vue实例了。在 created（如果希望首次选的数据来自于后端，就在此处发请求）（只发了异步请求，渲染是在后端响应之后才进行的）、beforeMount、mounted（在mounted中发请求会进行二次渲染） 这三个钩子
- 一般来说，在，created，mounted中都可以发送数据请求，但是，大部分时候，会在created发送
