赛捷软件论坛's Archiver

vicky.yu 发表于 2023-12-8 09:17

Vue 3.0 全局API

Vue 2.x 有许多全局 API 和配置,这些 API 和配置可以全局改变 Vue 的行为。例如,要创建全局组件,可以使用 Vue.component 这样的 API:

Vue.component('button-counter', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})
类似地,使用全局指令的声明方式如下:

Vue.directive('focus', {
  inserted: el => el.focus()
})
虽然这种声明方式很方便,但它也会导致一些问题。从技术上讲,Vue 2 没有“app”的概念,我们定义的应用只是通过 new Vue() 创建的根 Vue 实例。从同一个 Vue 构造函数创建的每个根实例共享相同的全局配置,因此:

在测试期间,全局配置很容易意外地污染其他测试用例。用户需要仔细存储原始全局配置,并在每次测试后恢复 (例如重置 Vue.config.errorHandler)。有些 API 像 Vue.use 以及 Vue.mixin 甚至连恢复效果的方法都没有,这使得涉及插件的测试特别棘手。实际上,vue-test-utils 必须实现一个特殊的 API createLocalVue 来处理此问题:
import { createLocalVue, mount } from '@vue/test-utils'
// 建扩展的 `Vue` 构造函数
const localVue = createLocalVue()
// 在 “local” Vue构造函数上 “全局” 安装插件
localVue.use(MyPlugin)
// 通过 `localVue` 来挂载选项
mount(Component, { localVue })
全局配置使得在同一页面上的多个“app”之间共享同一个 Vue 副本非常困难,但全局配置不同。
  // 这会影响两个根实例
  Vue.mixin({
    /* ... */
  })
  
  const app1 = new Vue({ el: '#app-1' })
  const app2 = new Vue({ el: '#app-2' })
为了避免这些问题,在 Vue 3 中我们引入...

#一个新的全局 API:createApp

页: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.