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} = Vue
const 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.x
Vue.config.ignoredElements = ['my-el', /^ion-/]
// 3.x
const 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.x
Vue.prototype.$http = () => {}

// 3.x
const 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')