Vue全局Api已改为利用实例

Vue2的全局Api

vue2的全局Api能够全局扭转vue的行为，这种操作容易意外净化其余测试用例

import { createLocalVue, mount } from '@vue/test-utils'// 扩大vue的构造函数const localVue = createLocalVue()// 在`local`Vue构造函数上全局装置插件localVue.use(Myplugin)// 通过localVue来挂载选项mount(Component, { localVue })

全局配置会使同一个页面上的多个app之间共享一个Vue正本十分艰难

// 这里的mixin将会影响两个根实例Vue.mixin({  /* ... */})const app1 = new Vue({ el: '#app1' })const app2 = new Vue({ el: '#app2' })

Vue3中新的全局Api：createApp

createApp返回了一个利用实例，

import { createApp } from 'vue'const app = createApp({})// 如果应用的是Vue的CDN，那么createApp是通过全局的Vue对象裸露的const { createApp } = Vueconst app = createApp({})

Vue3中比照Vue2全局Api的变动

所有其余不全局扭转行为的全局Api，当初被命名为exports

config.productionTip移除

在 Vue 3.x 中，“应用生产版本”提醒仅在应用“dev + full build”(蕴含运行时编译器并有正告的构建) 时才会显示。

对于 ES 模块构建，因为它们是与 bundler 一起应用的，而且在大多数状况下，CLI 或样板曾经正确地配置了生产环境，所以本技巧将不再呈现。

config.ignoredElements 替换为 config.isCustomElement

引入此配置我的项目目标是为了反对原生自定义元素，因而重命名能够更好的传播它的性能，新选项还须要一个比应用String/RegExp跟灵便的函数

// 2.xVue.config.ignoredElements = ['my-el', /^ion-/]// 3.xconst app = createApp({})app.config.isCustomElement = tag => tag.startsWith('ion-')

在 Vue 3 中，元素是否是组件的查看已转移到模板编译阶段，因而只有在应用运行时编译器时才思考此配置选项。如果你应用的是 runtime-only 版本 isCustomElement 必须通过 @vue/compiler-dom 在构建步骤替换——比方，通过 compilerOptions option in vue-loader。如果 config.isCustomElement 当应用仅运行时构建时时，将收回正告，批示用户在生成设置中传递该选项；这将是 Vue CLI 配置中新的顶层选项。

Vue.prototype 替换为 config.globalProperties

在Vue2中，Vue.prototype通常用于增加所有组件都能拜访的property
在Vue3等同于config.globalProperties这些property将被复制到利用中作为实例化组件的一部分

// 2.xVue.prototype.$http = () => {}// 3.xconst app = createApp({})app.config.globalProperties.$http = () => {}// 应用provide时，也应思考作为globaProperties的替代品

插件的应用

插件开发者通常应用vue.use，例如官网的vue-router是如何在浏览器环境中自行装置的

var inBrowser = typeof window !== 'undefined'/* ... */if(inBrowser && window.Vue) {  window.Vue.use(VueRouter)}

当初use全局Api不再应用，所以须要手动指定应用此插件

const app = createApp(MyApp)app.use(VueRouter)

挂载App实例

应用createApp初始化之后，利用实例app可应用app.mount(domTarget)挂在组件实例,
通过以上更改，残缺的写法将会改写为以下代码

import { createApp } from 'vue'import MyApp from './MyApp.vue'const app = createApp(MyApp)app.componenet('button-counter', {  data: () => ({    count: 0  }),  template:`<button @click="count++">Clicked {{ count }} times.</button>`})app.directive('focus', {  mounted: el => el.focus()})app.mount('#app')

Provide/inject

与2.x跟实例中应用provide选项相似，Vue3利用实例还能够提供可由利用内的任何组件注入的依赖项

// 入口文件app.provide('guide', 'Vue 3 Guide')// 子组件export default {  inject: {    book: {      from: 'guide'    }  },  template: `<div>{{ book }}</div>`}// 应用 provide 在编写插件时十分有用，能够代替 globalProperties

利用之间共享配置

要在利用之间共享配置，如组件或指令的一种办法时创立组件工厂：

import { createApp } from 'vue'import F00 from './Foo.vue'import Bar from './Bar.vue'const createMyApp = options => {  const app = createApp(options)  app.directive('focus', /* ... */)  return app}createApp(Foo).mount('#foo')createApp(Bar).mount('#bar')