Vue3页面的执行过程

在 Vue 3 中，一个普通的页面的执行过程可以分为以下几个环节：

1. 创建 Vue 应用程序实例（createApp）：

   • 使用 createApp 函数创建一个 Vue 根实例。
   • 配置根实例--该函数接收一个配置对象作为参数，其中的配置项可包括数据、模板、组件、路由（data、template、components、router）等。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  template: `<h1>{
  { message }}</h1>`
})

// 在 data 方法中初始化数据（Vue 2 的写法，在 Vue 3 中不推荐）
const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
})

// 在 setup 函数中初始化数据并返回
const app = Vue.createApp({
  setup() {
    // 使用 Vue.ref 创建响应式数据
    const message = Vue.ref('H