Vue3页面的执行过程

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

创建 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('Hello, Vue!')
    
    // 返回需要注入到组件实例中的属性和方法
    return {
      message
    }
  }
})

注意：createApp中，用data() 方法中初始化数据是Vue 2 的写法，在 Vue 3 中不推荐。 Vue 3推荐用setup()方法进行数据初始。在 Vue3 中，setup 函数是一个新引入的概念，它代替了之前版本中的 data、computed、methods 等选项，用于设置组件的初始状态和逻辑.

根组件的 setup 函数：
- 如果根组件中定义了 setup 函数，该函数会在组件实例创建之前执行。
- setup 函数可以用来初始化组件的响应式数据、声明生命周期钩子、计算属性等。
- 通过 return 语句将需要注入到组件实例中的属性和方法返回。
- 示例代码：
```
app.setup(() => {
  const message = Vue.ref('Hello, Vue!')
  
  // 返回需要注入到组件实例中的属性和方法
  return {
    message
  }
})
```
挂载根组件（mount）：
- 使用 mount 方法将创建的根组件实例挂载到指定的 DOM 元素上。
- mount 方法接收一个字符串选择器或者 DOM 元素作为参数，指定要挂载的目标元素。
- 示例代码：
```
app.mount('#app')
```
页面渲染：
- Vue 应用程序实例被挂载到指定的 DOM 元素上后，Vue 将会根据根组件的模板以及其中的数据和逻辑，生成页面的 DOM 结构。
- Vue 会自动将模板中的数据和组件实例中的数据进行绑定，实现数据驱动的页面渲染。
- 示例代码：
```
<div id="app">
  <h1>{{ message }}</h1>
</div>
```
交互与响应：
- 用户与页面进行交互时，Vue 会根据定义的事件监听器和方法响应用户的操作。
- 当数据发生变化时，Vue 会自动更新页面中相应的部分，保持页面与数据的同步。