Vue3页面的执行过程

bigcarp

已于 2024-04-19 14:40:44 修改

阅读量1k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2024-04-19 14:14:16 首次发布

本文链接：https://blog.youkuaiyun.com/bigcarp/article/details/137963184

本文详细介绍了在Vue3中，如何使用createApp创建应用实例，配置数据和模板，特别强调了从data()方法转向setup()函数进行数据初始化。还讲解了root组件的setup函数、挂载过程和数据驱动的页面渲染，以及交互与响应机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 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
    }
  }
})