Vue的生命周期

Vue的生命周期

vue总共分为8个阶段：

• 创建前/后（ beforeCreate/created）
• 载入前/后（ beforeMount/ mounted）
• 更新前/后（beforeUpdate/ updated）
• 销毁前/后（ beforeDestroy/ destroyed）

接下来看看详细的解释

• beforeCreate（创建前）：在数据观测和初始化事件还未开始
• created（创建后）：完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
• beforeMount（载入前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
• mounted（载入后） ： 在el 被新创建的 vm . $ el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
• beforeUpdate（更新前)： 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
• updated（更新后）： 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
• beforeDestroy（销毁前）： 在实例销毁之前调用。实例仍然完全可用。
• destroyed（销毁后） ：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

总结：

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。另外生命周期在第一次页面加载的时候会触发 beforeCreate, created, beforeMount, mounted 这几个钩子,并且DOM 渲染在 mounted 中就已经完成了。

Vue的生命周期适合那些场景

生命周期钩子的一些使用方法：
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作
domarguments是一个伪数组，没有遍历接口，不能遍历。

生命周期官方流程图

什么是vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

第一次页面加载会触发哪几个钩子？
答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

父子组件的生命周期

1. 执行顺序：

   • 父组件开始执行到beforeMount 然后开始子组件执行，最后是父组件mounted。
   • 如果有兄弟组件，父组件开始执行到beforeMount，然后兄弟组件依次执行到beforeMount，然后按照顺序执行mounted，最后执行父组件的mounted。

2. 当子组件挂载完成后，父组件才会挂载。

3. 当子组件完成挂在后，父组件会主动执行一次beforeUpdated/updated钩子函数（仅首次）父子组件在data变化中是分别监控的，但是更新props中的数据是关联的。

4. 销毁父组件时，先将子组件销毁后才会销毁父组件。

5. 兄弟组件的初始化（mounted之前）是分开进行，挂载是从上到下依次进行当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

created 和 mounted 有什么区别？(挂载完成之后 this.$el 获取当前组件的 dom 元素)

mounted一般是在html渲染完成后的操作，此时el，data都已经加载完成，一般对dom的操作都写在mounted中，例如获取innerHTML，初始化echarts的时候。

created一般是在html渲染前的操作，此时el还是undefined，data已经存在。这里不能对dom进行操作