vue3 createApp用法

在Vue 3中，createApp是用于创建一个Vue应用实例的函数。它是Vue 3中引入的新API，用于替代Vue 2中的new Vue()。createApp返回一个应用实例，该实例提供了一系列方法来配置和挂载应用。

基本用法：

首先，你需要从Vue中导入createApp。
然后，你可以传入一个根组件选项对象（通常是一个Vue组件）来创建应用实例。
最后，调用应用实例的mount方法将应用挂载到DOM元素上。

示例：

假设我们有一个简单的Vue组件（可以是一个对象定义的组件），我们可以这样创建和挂载应用：

复制代码

import { createApp } from 'vue'

// 定义根组件
const App = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: '<h1>{{ message }}</h1>'
}

// 创建应用实例
const app = createApp(App)

// 挂载到DOM元素上，这里假设有一个id为'app'的元素
app.mount('#app')

使用单文件组件（SFC）时，通常我们会这样写：

复制代码

import { createApp } from 'vue'
import App from './App.vue'   // 导入根组件

const app = createApp(App)
app.mount('#app')

应用实例还提供了一些其他方法，例如：

component：注册全局组件
directive：注册全局指令
use：使用插件
provide：提供依赖注入

例如，注册一个全局组件：

复制代码

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp(App)
app.component('MyComponent', MyComponent) // 注册全局组件
app.mount('#app')

使用插件：

复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router) // 使用路由插件
app.mount('#app')

提供依赖注入：

复制代码

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.provide('myKey', 'someValue') // 提供依赖
app.mount('#app')

注意：在Vue 3中，应用实例的配置（如全局组件、指令、插件等）必须在挂载之前完成。

另外，createApp还支持第二个参数，用于向根组件传递props。例如：

复制代码

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App, {
  // 这些props将被传递给根组件
  prop1: 'value1',
  prop2: 'value2'
})
app.mount('#app')

在根组件中，你可以像普通props一样接收这些值。

总结：createApp是Vue 3中创建应用实例的入口点，它提供了更清晰和模块化的API来配置和挂载Vue应用。

Vue 3 的 createApp 是创建 Vue 应用实例的工厂函数，它是 Vue 3 应用开发的入口点。以下是详细的用法：

1. 基本用法

创建最简单的应用

复制代码

import { createApp } from 'vue'

// 创建应用实例
const app = createApp({
  template: '<h1>Hello Vue 3!</h1>'
})

// 挂载到 DOM
app.mount('#app')

使用单文件组件 (SFC)

复制代码

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

2. 组件选项对象

复制代码

const app = createApp({
  // 数据
  data() {
    return {
      message: 'Hello Vue 3!',
      count: 0
    }
  },
  
  // 计算属性
  computed: {
    doubledCount() {
      return this.count * 2
    }
  },
  
  // 方法
  methods: {
    increment() {
      this.count++
    }
  },
  
  // 生命周期钩子
  mounted() {
    console.log('组件已挂载')
  },
  
  // 模板
  template: `
    <div>
      <h1>{{ message }}</h1>
      <p>Count: {{ count }}</p>
      <p>Doubled: {{ doubledCount }}</p>
      <button @click="increment">Increment</button>
    </div>
  `
})

3. 配置应用

全局组件注册

复制代码

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp(App)

// 注册全局组件
app.component('MyComponent', MyComponent)
app.component('AnotherComponent', {
  template: '<div>Another Component</div>'
})

app.mount('#app')

全局指令注册

复制代码

const app = createApp(App)

// 自定义指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

// 使用：<input v-focus />

使用插件

复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n'

const app = createApp(App)

// 使用插件
app.use(router)
app.use(store)
app.use(i18n)

app.mount('#app')

全局混入

复制代码

const app = createApp(App)

// 全局混入
app.mixin({
  created() {
    console.log('全局混入的 created 钩子')
  }
})

全局配置

复制代码

const app = createApp(App)

// 配置
app.config.globalProperties.$appName = 'My App'
app.config.errorHandler = (err, instance, info) => {
  console.error('Vue 错误:', err)
}
app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Vue 警告:', msg)
}

全局提供/注入

复制代码

const app = createApp(App)

// 提供全局数据
app.provide('theme', 'dark')
app.provide('api', axiosInstance)

// 在组件中使用：inject('theme')

4. 多应用实例

复制代码

// 在同一页面上创建多个独立的应用
const app1 = createApp({
  template: '<div>App 1</div>'
}).mount('#app1')

const app2 = createApp({
  template: '<div>App 2</div>'
}).mount('#app2')

const app3 = createApp({
  template: '<div>App 3</div>'
}).mount('#app3')

5. 带 Props 的根组件

复制代码

// 向根组件传递 props
const app = createApp(App, {
  title: 'My App',
  user: {
    name: 'John',
    age: 30
  }
})

// App.vue 中接收 props
export default {
  props: ['title', 'user'],
  // ...
}

6. 完整示例

复制代码

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import components from './components'
import directives from './directives'

// 创建应用实例
const app = createApp(App)

// 注册全局组件
Object.entries(components).forEach(([name, component]) => {
  app.component(name, component)
})

// 注册全局指令
Object.entries(directives).forEach(([name, directive]) => {
  app.directive(name, directive)
})

// 使用插件
app.use(router)
app.use(store)

// 全局配置
app.config.globalProperties.$filters = {
  currency(value) {
    return `$${value.toFixed(2)}`
  }
}

// 全局提供
app.provide('api', apiClient)
app.provide('theme', 'dark')

// 挂载应用
app.mount('#app')

7. TypeScript 支持

复制代码

// main.ts
import { createApp } from 'vue'
import type { App } from 'vue'
import AppComponent from './App.vue'

const app: App = createApp(AppComponent)

// 类型安全的全局属性扩展
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $appName: string
  }
}

app.config.globalProperties.$appName = 'My Vue 3 App'

app.mount('#app')

主要特点：

独立实例：每个应用实例完全独立，有自己的配置、组件、指令等
链式调用：大多数方法返回应用实例，支持链式调用
无全局污染：不同于 Vue 2 的全局 API，Vue 3 的应用实例不会影响其他实例
Tree-shaking 友好：未使用的 API 可以被构建工具优化掉

这就是 Vue 3 createApp 的基本用法和配置方式。它是 Vue 3 应用开发的起点，所有配置都在应用实例上进行。