全局API

常用全局API

全局API	说明
createApp	应用上下文的应用实例
h	虚拟节点
defineComponent	具有组件选项的对象
defineAsyncComponent	只有在需要时才会加载的异步组件
defineCustomElement	返回一个原生的自定义元素
createRenderer	自定义渲染器
nextTick	DOM 更新回调
useCssModule	允许在 setup 的单文件组件函数中访问 CSS 模块

全局API：createApp

import { createApp } from 'vue'

const app = createApp({})

参数

该函数接收一个根组件选项对象作为第一个参数：

const app = createApp({
  data() {
    return {
      ...
    }
  },
  methods: {...},
  computed: {...}
  ...
})

Vue3 main.js中的 createApp

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

vue2 和 vue3 全局 API 的对比：

2.x 全局 API	3.x 实例 API (app)	说明
Vue.config	app.config	每个 Vue 应用的配置项
Vue.config.productionTip	移除	使用生产版本提示
Vue.config.ignoredElements	app.config.compilerOptions.isCustomElement	指定方法识别 Vue 意外定义的自定义元素
Vue.component	app.component	注册组件
Vue.directive	app.directive	注册自定义指令
Vue.mixin	app.mixin	混入（公共JS代码）
Vue.use	app.use	插件的 install 调用
Vue.prototype	app.config.globalProperties	任何组件实例中访问的全局 property
Vue.extend	移除	构造函数的类，已被 createApp 功能替代
-	app.provide	向下组件传递的值
-	app.mount()	所提供的 DOM 元素渲染根组件
-	app.unmount()	卸载所提供的 DOM 元素上应用了的根组件。
-	app.version	以字符串形式提供已安装的 Vue 的版本号。

所有其他不全局改变行为的全局 API 现在都是具名导出。

全局 API Treeshaking（概念）

如果模块打包工具支持 tree-shaking，则 Vue 应用中未使用的全局 API 将从最终的打包产物中排除，从而获得最佳的文件大小。

如果使用了 webpack 这样的模块打包工具，这可能会导致 Vue 的源代码输出打包到插件中，而通常情况下，这并不是你所期望的。为了防止发生这种情况，一种常见做法是配置模块打包工具以将 Vue 从最终的打包产物中排除。对于 webpack 来说，你可以使用 externals (opens new window) 配置选项：

// webpack.config.js
module.exports = {
  /*...*/
  externals: {
    vue: 'Vue'
  }
}

这将告诉 webpack 将 Vue 模块视为一个外部库，而不将它打包进来。