vue钩子渲染顺序

当我们使用vue构建一个应用时，我们肯定会使用到vue的钩子函数，钩子函数是vue提供的一些特定函数，可以在特定的阶段执行代码逻辑，也就是包裹在特定钩子中的代码。而这些钩子函数执行的顺序又是怎么样的呢？这篇文章将详细介绍vue钩子渲染顺序。

首先，我们需要了解vue的生命周期，vue组件从实例创建、挂载到销毁的过程就是一个生命周期。vue生命周期分为8个阶段，分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。

  const vm = new Vue({
    beforeCreate() {
      console.log('beforeCreate')
    },created(){
      console.log('created')
    },beforeMount() {
      console.log('beforeMount')
    },mounted() {
      console.log('mounted')
    },beforeUpdate(){
      console.log('beforeUpdate')
    },updated(){
      console.log('updated')
    },beforeDestroy() {
      console.log('beforeDestroy')
    },destroyed() {
      console.log('destroyed')
    }
  })

代码中的beforeCreate、created、beforeMount和mounted分别对应组件的初始化阶段、挂载阶段以及更新阶段。

在初始化阶段中，beforeCreate钩子函数最先被调用，此时组件实例被创建但是data、props等属性还未初始化，因此在beforeCreate中无法访问到data等属性。接着created钩子函数被调用，此时组件实例的data、props等属性已经被初始化，可以在此进行ajax请求等数据操作，创建时处于一个空的实例对象。

  beforeCreate
  created

在挂载阶段中，beforeMount钩子函数被调用，此时vue将模板编译成render函数，并且将render函数插入到DOM中，但此时DOM元素还未被渲染，仍然是旧的DOM。接着mounted钩子函数被调用，此时DOM已经被渲染，可在此进行DOM相关操作。

  beforeCreate
  created
  beforeMount
  mounted

在更新阶段中，beforeUpdate钩子函数被调用，此时DOM元素还未被更新，仍然是旧的DOM，但数据已经被更新。而updated钩子函数被调用时，DOM已经被更新，在此进行DOM操作。

  beforeCreate
  created
  beforeMount
  mounted
  beforeUpdate
  updated

最后是销毁阶段，beforeDestroy钩子函数被调用，此时组件即将被销毁，但是DOM还未被移除，接下来destroyed钩子函数被调用，此时组件已经被销毁和解除事件监听和定时器等资源。

  beforeCreate
  created
  beforeMount
  mounted
  beforeUpdate
  updated
  beforeDestroy
  destroyed

总结，vue钩子渲染顺序是 beforeCreate ->created ->beforeMount ->mounted ->beforeUpdate ->updated ->beforeDestroy ->destroyed。