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)。 Vue.mixin() // 混合对象到 Vue 的原型中。
2. 全局变量:在使用 Vue 的时候,你会遇到一些特定的关键字作为保留字来使用,这些保留字是 VUE 的关键字,它们有特定的含义并且不能随意修改或者覆盖。这些保留字包括:
$el: 返回当前 vnode 的 DOM 节点对象; $data: 返回当前 vnode 的 data; $options: 返回当前 vnode 的 options; $parent: 返回当前 vnode 的 parent; $root: 返回根 vnode; $children: 返回当前 vnode 的 children; $refs: 返回当前 vnode 的 refs; $slots: 返回当前 vnode 的 slots; $isServer: 如果是服务端运行就是 true,如果是浏览端就是 false;
3. 全局资源:在使用 VUE 时会遇到一些特定领域的语法或者语义上的问题,而这时就要申请相应的公式来处理,而这就是所谓的“公式”,即“v-model”、“v-if”、“v-for”、“v-show”、“v-on”、 “v-bind”、 “v-cloak”、 “v-once"等都是 VUE 领域中常用到的语法,而它们都是在 VUE 领域中有特定释义并且不能随意修改或覆盖.
返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。
const app = Vue.createApp({})
你可以在 createApp
之后链式调用其它方法,这些方法可以在应用 API 中找到。
该函数接收一个根组件选项对象作为第一个参数:
const app = Vue.createApp({
data() {
return {
...
}
},
methods: {...},
computed: {...}
...
})
使用第二个参数,我们可以将根 prop 传递给应用程序:
const app = Vue.createApp(
{
props: ["username"]
},
{ username: "Evan" }
)
<div id="app">
<!-- 会显示 "Evan" -->
{{ username }}
</div>
interface Data {
[key: string]: unknown
}
export type CreateAppFunction<HostElement> = (
rootComponent: PublicAPIComponent,
rootProps?: Data | null
) => App<HostElement>
返回一个”虚拟节点“,通常缩写为 VNode:一个普通对象,其中包含向 Vue 描述它应在页面上渲染哪种节点的信息,包括所有子节点的描述。它的目的是用于手动编写的渲染函数:
render() {
return Vue.h("h1", {}, "Some title")
}
接收三个参数:type
,props
和 children
String | Object | Function
HTML 标签名、组件或异步组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。
Object
一个对象,与我们将在模板中使用的 attribute、prop 和事件相对应。可选。
String | Array | Object
子代 VNode,使用 h()
生成,或者使用字符串来获取“文本 VNode”,或带有插槽的对象。可选。
h("div", {}, [
"Some text comes first.",
h("h1", "A headline"),
h(MyComponent, {
someProp: "foobar"
})
])
从实现上看,defineComponent
只返回传递给它的对象。但是,就类型而言,返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持。
具有组件选项的对象
import { defineComponent } from "vue"
const MyComponent = defineComponent({
data() {
return { count: 1 }
},
methods: {
increment() {
this.count++
}
}
})
或者是一个 setup
函数,函数名称将作为组件名称来使用
import { defineComponent, ref } from "vue"
const HelloWorld = defineComponent(function HelloWorld() {
const count = ref(0)
return { count }
})
创建一个只有在需要时才会加载的异步组件。
对于基本用法,defineAsyncComponent
可以接受一个返回 Promise
的工厂函数。Promise 的 resolve
回调应该在服务端返回组件定义后被调用。你也可以调用 reject(reason)
来表示加载失败。
import { defineAsyncComponent } from "vue"
const AsyncComp = defineAsyncComponent(() =>
import("./components/AsyncComponent.vue")
)
app.component("async-component", AsyncComp)
当使用局部注册时,你也可以直接提供一个返回 Promise
的函数:
import { createApp, defineAsyncComponent } from "vue"
createApp({
// ...
components: {
AsyncComponent: defineAsyncComponent(() =>
import("./components/AsyncComponent.vue")
)
}
})
对于高阶用法,defineAsyncComponent
可以接受一个对象:
defineAsyncComponent
方法还可以返回以下格式的对象:
import { defineAsyncComponent } from "vue"
const AsyncComp = defineAsyncComponent({
// 工厂函数
loader: () => import("./Foo.vue")
// 加载异步组件时要使用的组件
loadingComponent: LoadingComponent,
// 加载失败时要使用的组件
errorComponent: ErrorComponent,
// 在显示 loadingComponent 之前的延迟 | 默认值:200(单位 ms)
delay: 200,
// 如果提供了 timeout ,并且加载组件的时间超过了设定值,将显示错误组件
// 默认值:Infinity(即永不超时,单位 ms)
timeout: 3000,
// 定义组件是否可挂起 | 默认值:true
suspensible: false,
onError(error, retry, fail, attempts) {
if (error.message.match(/fetch/) && attempts <= 3) {
// 请求发生错误时重试,最多可尝试 3 次
retry()
} else {
// 注意,retry/fail 就像 promise 的 resolve/reject 一样:
// 必须调用其中一个才能继续错误处理。
fail()
}
}
})
参考:动态和异步组件
WARNING
resolveComponent
只能在 render
或 setup
函数中使用。
如果在当前应用实例中可用,则允许按名称解析 component
。
返回一个 Component
。如果没有找到,则返回 undefined
。
const app = Vue.createApp({})
app.component("MyComponent", {
})
import { resolveComponent } from "vue"
render() {
const MyComponent = resolveComponent("MyComponent")
}
接受一个参数:name
String
已加载的组件的名称。
WARNING
resolveDynamicComponent
只能在 render
或 setup
函数中使用。
允许使用与 <component :is="">
相同的机制来解析一个 component
。
返回已解析的 Component
或新创建的 VNode
,其中组件名称作为节点标签。如果找不到 Component
,将发出警告。
import { resolveDynamicComponent } from "vue"
render () {
const MyComponent = resolveDynamicComponent("MyComponent")
}
接受一个参数:component
String | Object (组件的选项对象)
有关详细信息,请参阅动态组件上的文档。
WARNING
resolveDirective
只能在 render
或 setup
函数中使用。
如果在当前应用实例中可用,则允许通过其名称解析一个 directive
。
返回一个 Directive
。如果没有找到,则返回 undefined
。
const app = Vue.createApp({})
app.directive("highlight", {})
import { resolveDirective } from "vue"
render () {
const highlightDirective = resolveDirective("highlight")
}
接受一个参数:name
String
已加载的指令的名称。
WARNING
withDirectives
只能在 render
或 setup
函数中使用。
允许将指令应用于 VNode。返回一个包含应用指令的 VNode。
import { withDirectives, resolveDirective } from "vue"
const foo = resolveDirective("foo")
const bar = resolveDirective("bar")
return withDirectives(h("div"), [
[foo, this.x],
[bar, this.y]
])
接受两个参数:vnode
和 directives
。
vnode
一个虚拟节点,通常使用 h()
创建。
Array
一个指令数组。
每个指令本身都是一个数组,最多可以定义 4 个索引,如以下示例所示。
[directive]
- 该指令本身。必选。 const MyDirective = resolveDirective("MyDirective")
const nodeWithDirectives = withDirectives(h("div"), [[MyDirective]])
[directive, value]
- 上述内容,再加上分配给指令的类型为 any
的值。 const MyDirective = resolveDirective("MyDirective")
const nodeWithDirectives = withDirectives(h("div"), [[MyDirective, 100]])
[directive, value, arg]
- 上述内容,再加上一个 string
参数,比如:在 v-on:click
中的 click
。 const MyDirective = resolveDirective("MyDirective")
const nodeWithDirectives = withDirectives(h("div"), [
[MyDirective, 100, "click"]
])
[directive, value, arg, modifiers]
- 上述内容,再加上定义任何修饰符的 key: value
键值对 Object
。 const MyDirective = resolveDirective("MyDirective")
const nodeWithDirectives = withDirectives(h("div"), [
[MyDirective, 100, "click", { prevent: true }]
])
createRenderer 函数接受两个泛型参数: HostNode
和 HostElement
,对应于宿主环境中的 Node 和 Element 类型。
例如,对于 runtime-dom,HostNode 将是 DOM Node
接口,HostElement 将是 DOM Element
接口。
自定义渲染器可以传入特定于平台的类型,如下所示:
import { createRenderer } from "vue"
const { render, createApp } = createRenderer<Node, Element>({
patchProp,
...nodeOps
})
接受两个参数:HostNode
和 HostElement
。
Node
宿主环境中的节点。
Element
宿主环境中的元素。
将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。
import { createApp, nextTick } from "vue"
const app = createApp({
setup() {
const message = ref("Hello!")
const changeMessage = async newMessage => {
message.value = newMessage
await nextTick()
console.log("Now DOM is updated")
}
}
})
参考:$nextTick
实例方法
#template类型:string详细:一个字符串模板作为 component 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略...
#key预期:number | stringkey 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 k...
本节例子中代码使用的单文件组件语法#computed使用 getter 函数,并为从 getter 返回的值返回一个不变的响应式 ref 对象。const ...
#Data Property组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象,然后 Vue 会通过响...
#用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式...