Vue3中全局Api改为应用实例的相关变更

Posted 月岛蘑菇

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3中全局Api改为应用实例的相关变更相关的知识,希望对你有一定的参考价值。

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的变化

2.x全局Api3.x实例(app)Api
Vue.cofingapp.config
Vue.config.productionTip* 移除
Vue.config.ignoredElements* app.config.isCustomElement
Vue.componentapp.component
Vue.directiveapp.directive
Vue.mixinapp.mixin
Vue.use* app.use
Vue.prototype* app.config.globalProperties

所有其他不全局改变行为的全局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\')

以上是关于Vue3中全局Api改为应用实例的相关变更的主要内容,如果未能解决你的问题,请参考以下文章

vue3中渲染函数的非兼容变更

重启Vue3学习

vue3学习随便记3

vue3学习随便记3

2022-03-03 vue3中使用全局变量

摸透Vue3中的13个全局Api,让你的代码更优雅!