beforeCreate: 在实例初始化之后、数据观测 (data observation) 和 event/watcher 事件配置之前被调用。在这个阶段，实例的选项对象已经处理完毕，但是实例尚未初始化完成，因此无法访问到数据和方法。
created: 在实例创建完成后被立即调用。在这个阶段，Vue 实例已经完成了数据观测、计算属性、方法和观察者/事件的配置，但是尚未挂载到 DOM 上。
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。在这个阶段，模板编译完成，但尚未将渲染结果挂载到页面的 DOM 上。
mounted: 在实例被挂载到 DOM 后调用。在这个阶段，Vue 实例已经挂载到了页面上，并且可以访问到 DOM 元素。这是执行初始数据获取、订阅事件、以及操作 DOM 的好时机。
beforeUpdate: 在数据更新时调用，但是在 DOM 重新渲染之前。在这个阶段，数据已经更新，但是页面尚未重新渲染，可以用来比较前后数据的变化，并在更新之前执行一些操作。
updated: 在数据更新后调用，DOM 重新渲染完成。在这个阶段，Vue 实例的数据已经更新，页面上的 DOM 元素也已经重新渲染，可以执行一些需要依赖更新后 DOM 的操作。
beforeDestroy: 在实例销毁之前调用。在这个阶段，Vue 实例仍然完全可用，可以执行一些清理操作，例如取消定时器、解绑事件等。
destroyed: 在实例销毁后调用。在这个阶段，Vue 实例及其相关的 DOM 已经完全销毁，无法再访问到实例的数据和方法。

1、vue初始化步骤

具体来说，Vue 实例的初始化过程包括以下几个步骤：

选项处理：在创建 Vue 实例时，我们可以传入一个选项对象，该对象包含了 Vue 实例的配置信息。在初始化过程中，Vue 会对这些选项进行处理和解析，以确定如何配置实例。
数据观测： Vue 实例会对选项中的 data 数据进行观测 (data observation)，以便在数据发生变化时能够及时响应并更新视图。Vue 使用了响应式系统来实现数据的观测和更新。
模板编译：如果 Vue 实例指定了模板选项 (template 或 el 中的 DOM 元素的内容作为模板)，Vue 会将模板编译成渲染函数，以便后续将其用于创建虚拟 DOM，并最终渲染到页面上。
组件注册：如果 Vue 实例中使用了组件，Vue 会在初始化过程中注册这些组件，以便后续在模板中使用。
事件和观察者配置： Vue 实例中可能会包含事件处理、观察者 (watchers)、计算属性 (computed properties) 等配置，Vue 会在初始化过程中对这些配置进行处理和配置。
生命周期钩子函数的调用：在 Vue 实例的初始化过程中，会依次调用一系列的生命周期钩子函数，例如 beforeCreate、created 等，在这些钩子函数中我们可以添加自定义的逻辑。

通过以上步骤，Vue 实例完成了初始化设置，可以被挂载到页面上，并开始响应用户的交互行为。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Example</title>
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <!-- 定义一个 div 元素作为 Vue 实例的挂载点 -->
  <div id="app">
    <!-- 在模板中使用 Vue 实例的数据和方法 -->
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>

  <!-- 创建 Vue 实例并挂载到页面上 -->
  <script>
    // 创建一个 Vue 实例
    new Vue({
      // 指定 Vue 实例挂载的 DOM 元素
      el: '#app',
      // 定义 Vue 实例的数据
      data: {
        message: 'Hello Vue!'
      },
      // 定义 Vue 实例的方法
      methods: {
        reverseMessage: function() {
          this.message = this.message.split('').reverse().join('');
        }
      }
    });
  </script>
</body>
</html>

在head里引入vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
定义vue的挂载点：<div id="app">  <p>{{ message }}</p> <button @click="reverseMessage">Reverse Message</button> </div>

Vue生命周期

1、vue初始化步骤