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

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

2. 根组件的 setup 函数：

   • 如果根组件中定义了 setup 函数，该函数会在组件实例创建之前执行。
   • setup 函数可以用来初始化组件的响应式数据、声明生命周期钩子、计算属性等。
   • 通过 return 语句将需要注入到组件实例中的属性和方法返回。
   • 示例代码：

     app.setup(() => {
       const message = Vue.ref('Hello, Vue!')
       
       // 返回需要注入到组件实例中的属性和方法
       return {
         message
       }
     })
     

3. 挂载根组件（mount）：

   • 使用 mount 方法将创建的根组件实例挂载到指定的 DOM 元素上。
   • mount 方法接收一个字符串选择器或者 DOM 元素作为参数，指定要挂载的目标元素。
   • 示例代码：

     app.mount('#app')
     

4. 页面渲染：

   • Vue 应用程序实例被挂载到指定的 DOM 元素上后，Vue 将会根据根组件的模板以及其中的数据和逻辑，生成页面的 DOM 结构。
   • Vue 会自动将模板中的数据和组件实例中的数据进行绑定，实现数据驱动的页面渲染。
   • 示例代码：

     <div id="app">
       <h1>{{ message }}</h1>
     </div>
     

5. 交互与响应：

   • 用户与页面进行交互时，Vue 会根据定义的事件监听器和方法响应用户的操作。
   • 当数据发生变化时，Vue 会自动更新页面中相应的部分，保持页面与数据的同步。