Vue生命周期中的八个钩子函数相机

Vue生命周期中的八个钩子函数是Vue组件在创建、挂载、更新、销毁过程中执行的钩子函数。这些钩子函数在Vue组件中起到了重要的作用，以便开发者在这些组件生命周期的不同时期进行不同的操作。这八个钩子函数分别是：

1. beforeCreate：在Vue实例被创建后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created：在Vue实例创建完成后立即调用该钩子函数。此时，实例已完成以下配置：数据观测(data observer)、属性和方法的运算、watch/event事件回调。同时，挂载阶段还没有开始，$el属性为undefined，所以不能访问DOM元素。
3. beforeMount：在挂载开始之前被调用。该钩子函数中调用vm.$el生成虚拟dom。
4. mounted：在挂载结束后调用。此时DOM已经完成渲染，mounted钩子函数中经常用来进行一些初始化操作，如数据请求，页面计时等。当组件DOM更新时，mounted不会被调用，可以使用updated进行页面更新的操作。
5. beforeUpdate：在组件更新之前调用。该钩子函数中的操作不能进行响应式的数据改变，否则可能会导致无限循环的更新。一般用于更新数据之前的数据处理。
6. updated：在组件DOM更新完成之后调用。此时组件进行了数据更新并且DOM元素已经完成了重新渲染。因此，可以在这个钩子中访问更新后的DOM状态。
7. beforeDestroy：在实例销毁之前调用。这个钩子中，实例仍然完全可用。可以用来在实例被销毁之前，进行资源的清理工作，如定时器的销毁，事件的解绑等。
8. destroyed：在实例销毁之后调用，在这个钩子函数中，实例的所有指令，组件等已经被解绑。

下面通过两个示例说明生命周期的使用：

首先，我们通过beforeCreate和created两个生命周期，对vue实例的data进行初始化。代码如下：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  beforeCreate () {
    console.log('beforeCreate', this.message) // 输出 undefined
  },
  created () {
    console.log('created', this.message) // 输出 ''
    this.message = 'Hello, Vue!'
  }
}
</script>

在上面的代码中，beforeCreate和created两个钩子函数都用来对Vue实例中的data进行初始化。其中，beforeCreate钩子函数中打印的this.message输出undefined，说明在beforeCreate钩子执行的时候，data中的变量还未被初始化；而在created钩子函数中，this.message输出''，说明created钩子函数执行时，data中已经完成了初始化。同时，我们在created钩子中修改了data中的message，使其变为了'Hello, Vue!'，这个值会被渲染到模板中。

第二个示例是在mounted钩子函数中，请求页面数据并渲染。代码如下：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: []
    }
  },
  mounted () {
    this.$http.get('/api/items').then(res => {
      this.items = res.data
    })
  }
}
</script>

在上面的代码中，我们在mounted钩子函数中发送了一次ajax请求，从后台获取到了数据，并将其赋值给了data中的items项。由于mounted钩子函数在页面渲染完成后执行，所以在这个钩子中可以直接对DOM元素进行操作。其中，我们使用了Vue的$http插件，发送了一次get请求，并将返回值中的data赋值给了data中的items，然后在模板中使用v-for指令，遍历items数组中的每一项，并进行渲染。这样，页面就能够在渲染完成后，通过ajax请求获取到数据并进行动态渲染。