Vue.js 是一个构建数据驱动的 web 界面的库,它提供了一系列的全局 API,可以让你在不同的环境中使用 Vue。
Vue 全局 API 分为三大类:全局方法、全局变量、全局资源。
1. 全局方法:Vue 提供了一些全局方法来帮助开发者快速实现一些常见的功能。这些方法包括:
Vue.extend() // 扩展 Vue 构造函数,创建一个子类。 Vue.nextTick() // 在下次 DOM 更新循环结束之后执行回调。 Vue.set() // 设置 Vue 实例上的数据。 Vue.delete() // 删除 Vue 实例上的数据。 Vue.directive() // 注册或者获取全局指令。 Vue.filter() // 注册或者获取全局过滤函数。 Vue.component() // 注册或者获取全局组件。 Vue.use() // 配置 Vue 的使用项目(如 vue-router)。
2. 全局变量:在使用 Vue 的时候,你会遇到一些特定的关键字作为标识符来表明特定的意义或者行为,这些标识符就是 Vue 的关键字变量:
$el: 返回当前 Vue 对象对应的 DOM 元素 $data: 返回当前 Vue 对象对应的 data $options: 返回当前 Vue 对象对应的 options $parent: 返回当前 Vue 对象对应的 parent $root: 返回当前 VVue 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 必须实现一个特殊的 APIcreateLocalVue
来处理此问题: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
调用
createApp
返回一个应用实例,这是 Vue 3 中的新概念:import { createApp } from "vue" const app = createApp({})
应用实例暴露当前全局 API 的子集,经验法则是,任何全局改变 Vue 行为的 API 现在都会移动到应用实例上,以下是当前全局 API 及其相应实例 API 的表:
2.x 全局 API 3.x 实例 API ( app
)Vue.config app.config Vue.config.productionTip removed (见下方) Vue.config.ignoredElements app.config.isCustomElement (见下方) Vue.component app.component Vue.directive app.directive Vue.mixin app.mixin Vue.use app.use (见下方) 所有其他不全局改变行为的全局 API 现在被命名为 exports,文档见全局 API Treeshaking。
#
config.productionTip
移除在 Vue 3.x 中,“使用生产版本”提示仅在使用“dev + full build”(包含运行时编译器并有警告的构建) 时才会显示。
对于 ES 模块构建,由于它们是与 bundler 一起使用的,而且在大多数情况下,CLI 或样板已经正确地配置了生产环境,所以本技巧将不再出现。
#
config.ignoredElements
替换为config.isCustomElement
引入此配置选项的目的是支持原生自定义元素,因此重命名可以更好地传达它的功能,新选项还需要一个比旧的 string/RegExp 方法提供更多灵活性的函数:
// before Vue.config.ignoredElements = ["my-el", /^ion-/] // after const app = Vue.createApp({}) app.config.isCustomElement = tag => tag.startsWith("ion-")
重要
在 3.0 中,元素是否是组件的检查已转移到模板编译阶段,因此只有在使用运行时编译器时才考虑此配置选项。如果你使用的是 runtime-only 版本
isCustomElement
必须通过@vue/compiler-dom
在构建步骤替换——比如,通过compilerOptions
option in vue-loader。
- 如果
config.isCustomElement
当使用仅运行时构建时时,将发出警告,指示用户在生成设置中传递该选项;- 这将是 Vue CLI 配置中新的顶层选项。
#插件使用者须知
插件开发者通常使用
Vue.use
。例如,官方的vue-router
插件是如何在浏览器环境中自行安装的:var inBrowser = typeof window !== "undefined" if (inBrowser && window.Vue) { window.Vue.use(VueRouter) }
由于
use
全局 API 在 Vue 3 中不再使用,此方法将停止工作并停止调用Vue.use()
现在将触发警告,于是,开发者必须在应用程序实例上显式指定使用此插件: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.mount("#app")
经过所有这些更改,我们在指南开头的组件和指令将被改写为如下内容:
const app = createApp(MyApp) app.component("button-counter", { data: () => ({ count: 0 }), template: "<button @click="count++">Clicked {{ count }} times.</button>" }) app.directive("focus", { mounted: el => el.focus() }) // 现在所有应用实例都挂载了,与其组件树一起,将具有相同的 “button-counter” 组件 和 “focus” 指令不污染全局环境 app.mount("#app")
#提供/注入 (Provide / Inject)
与在 2.x 根实例中使用
provide
选项类似,Vue 3 应用实例还可以提供可由应用内的任何组件注入的依赖项:// 在入口 app.provide("guide", "Vue 3 Guide") // 在子组件 export default { inject: { book: { from: "guide" } }, template: `<div>{{ book }}</div>` }
#在应用之间共享配置
在应用之间共享配置 (如组件或指令) 的一种方法是创建工厂功能,如下所示:
import { createApp } from "vue" import Foo from "./Foo.vue" import Bar from "./Bar.vue" const createMyApp = options => { const app = createApp(options) app.directive("focus" ) return app } createMyApp(Foo).mount("#foo") createMyApp(Bar).mount("#bar")
现在,Foo 和 Bar 实例及其后代中都可以使用
focus
指令。
#概览对内联特性的支持已被移除。#2.x 语法在 2.x 中,Vue 为子组件提供了 inline-template attribute,以便将其内部内容用作模...
#概览以下是变更的简要总结:非兼容:不再支持使用数字 (即键码) 作为 v-on 修饰符非兼容:不再支持 config.keyCodes#2.x 语法在...
提示在阅读文档之前,你应该已经熟悉了这两个 Vue 基础和创建组件。在 Vue Mastery 上观看关于组合式 API 的免费视频。通过创建 ...
#概览就变化内容而言,此部分属于高阶内容:非兼容:用于自定义组件时,v-modelprop 和事件默认名称已更改:prop:value - model...