Vue的生命周期指的是 Vue 实例从创建到销毁的整个过程。这个过程可以分为以下几个阶段：

1. 创建前阶段 (beforeCreate)：

在实例初始化后执行，此时的数据监听和事件绑定机制都未完成，因此无法访问DOM节点。

说明：在这个阶段，数据是获取不到的，并且真实dom元素也是没有渲染出来的

2. 创建后阶段 (created)：

Vue实例已经创建，数据侦听、计算属性、方法、事件/侦听器的回调函数已配置完毕，但挂载阶段还没开始，仍然无法获取到DOM元素。适合进行异步请求等操作。

说明：在这个阶段，可以访问到数据了，但是页面当中真实dom节点还是没有渲染出来，在这个钩子函数里面，可以进行相关初始化事件的绑定、发送请求操作

3. 挂载前阶段 (beforeMount)：

完成了DOM的初始化，但仍然无法获取到具体的DOM元素，因为Vue还没有进行根节点挂载。这个阶段是过渡性的，在项目中使用得比较少。

说明：代表dom马上就要被渲染出来了，但是却还没有真正的渲染出来，这个钩子函数与created钩子函数用法基本一致，可以进行相关初始化事件的绑定、发送ajax操作

4. 挂载后阶段 (mounted)：

实例已经被挂载完成了，可以获取到数据和DOM元素了。在这个阶段，视图的数据和DOM元素的数据已经保持同步。

说明：mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick。

挂载阶段的最后一个钩子函数,数据挂载完毕，真实dom元素也已经渲染完成了,这个钩子函数内部可以做一些实例化相关的操作

5. 更新前阶段 (beforeUpdate)：

在数据发生改变，但页面还没有完成更新时执行的操作。适合在现有DOM将要被更新之前访问它。

说明：这个钩子函数初始化的不会执行,当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行,这个钩子函数获取dom的内容是更新之前的内容

6. 更新后阶段 (updated)：

当实例的内容被更新以后，渲染完毕页面会执行这个钩子函数。

说明：这个钩子函数获取dom的内容是更新之后的内容生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实dom渲染了。

7. 销毁前阶段 (beforeDestroy)：

准备销毁当前实例之前执行的操作。在这个阶段，data和methods方法都能用，但还没有完全销毁。

说明：当组件销毁的时候，就会触发这个钩子函数代表销毁之前，可以做一些善后操作,可以清除一些初始化事件、定时器相关的东西。

8. 销毁后阶段 (destroyed)：

当销毁完毕这个实例了，那么会执行一遍这个钩子函数，然后整个Vue生命周期结束。在这个阶段，所有的东西已经解绑。

说明：Vue实例失去活性，完全丧失功能

在Vue的生命周期中，我们可以使用生命周期钩子函数来定义在特定时候执行的代码。这些钩子函数会自动绑定this上下文到实例中，因此不能使用箭头函数来定义生命周期方法，以避免this指向的问题。

<template>
  <div id="app">
    <p id="box">{{msg}}</p>
    <button @click="change">更新</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello'
    }
  },
  methods: {
    change () {
      this.msg = 'hello world'
    }
  },
  beforeCreate () {
    console.log('---------------->beforeCreate')
    console.log(this.msg, document.getElementById('box'))
  },
  created () {
    console.log('---------------->created')
    console.log(this.msg, document.getElementById('box'))
  },
  beforeMount () {
    console.log('---------------->beforeMount')
    console.log(this.msg, document.getElementById('box'))
  },
  mounted () {
    console.log('---------------->mounted')
    console.log(this.msg, document.getElementById('box'))
  },
  beforeUpdate () {
    console.log('---------------->beforeUpdate')
    console.log(this.$el.innerHTML)
    console.log(this.msg, document.getElementById('box'))
  },
  updated () {
    console.log('---------------->updated')
    console.log(this.$el.innerHTML)
    console.log(this.msg, document.getElementById('box'))
  }
}
</script>

当数据改变之后又会触发beforeUpdate，updated两个钩子函数