Vue3 - createApp做了什么

是什么

• 每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例
• 两步：

1. 创建应用：创建应用实例，const app = createApp(myApp)
2. 挂载应用: 应用实例挂载在一个容器元素中 app.mount('#app')

使用

// main.ts里使用
import { createApp } from 'vue'
import App from './App.vue'

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

// 插件里使用
import MyComponent from './my-component.vue'

const MyComponent = createApp(MyComponent)
MyComponent.mount(document.body)

// mount（挂载） | 应用实例的根组件挂载在提供的 DOM 元素上。同Vue2中的el
// unmount(卸载) | 在提供的 DOM 元素上卸载应用实例的根组件。

原理

// createApp packages/runtime-dom/src/index.ts
1. 重写mounted

对比new Vue

• Vue2中 使用 Vue 函数创建一个新的 Vue 实例
• Vue3的createApp会返回一个全新的app，可以很好地避免 全局(如plugins, mixins, prototype properties等等) 污染
• Vue2 使用$mount 或者 el属性 挂载应用
• 都是创建应用实例，然后挂载到DOM节点上

// vue2
import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

Vue.prototype.customProperty = () => {}

new Vue({
  render: h => h(App)
}).$mount('#app')

// 或者
new Vue({
  el: '#app',
  render: h => h(App)
})

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

const app = createApp(App)

app.config.isCustomElement = tag => tag.startsWith('app-')
app.use(/* ... */) 安装插件
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)
app.provide(/* ... */)

app.config.globalProperties.customProperty = () => {}

app.mount(App, '#app')