参考文档：介绍 | Vue.js
API文档：API | Vue.js
一、全局方法：应用 API | Vue.js
component：
注册或检索全局组件。注册还会使用给定的
name参数自动设置组件的name。
config：
一个包含应用配置的对象。
directive：
注册或检索全局指令。
mixin：
将一个 mixin 应用在整个应用范围内。一旦注册，它们就可以在当前的应用中任何组件模板内使用它。插件作者可以使用此方法将自定义行为注入组件。不建议在应用代码中使用。
mount：
所提供 DOM 元素的
innerHTML将被替换为应用根组件的模板渲染结果。
provide：
设置一个可以被注入到应用范围内所有组件中的值。组件应该使用
inject来接收 provide 的值。从
provide/inject的角度来看，可以将应用程序视为根级别的祖先，而根组件是其唯一的子级。该方法不应该与 provide 组件选项或组合式 API 中的 provide 方法混淆。虽然它们也是相同的
provide/inject机制的一部分，但是它们是用来配置组件而非应用所 provide 的值。通过应用提供值在编写插件时尤其有用，因为插件一般不能使用组件来提供值。这是对 globalProperties 的替代选择。
注意
provide和inject绑定不是响应式的。这是有意为之的。不过，如果你向下传递一个响应式对象，这个对象上的 property 会保持响应式。
unmount：
卸载应用实例的根组件。
use：
安装 Vue.js 插件。如果插件是一个对象，则它必须暴露一个
install方法。如果插件本身是一个函数，则它将被视为install方法。该
install方法将以应用实例作为第一个参数被调用。传给use的其他options参数将作为后续参数传入该安装方法。当在同一个插件上多次调用此方法时，该插件将仅安装一次。
version：
以字符串形式提供已安装的 Vue 的版本号。这对于基于不同版本使用不同策略的社区插件来说特别有用。
二、项目目录结构：
index.html：主界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VUE测试</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
main.js：主js
import { createApp } from 'vue'
import App from './App.vue'
//创建实例，并注册到app元素上
createApp(App).mount('#app')
App.vue：应用定义
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
HelloWorld.vue：组件
<script setup>
import { ref } from 'vue'
defineProps({
msg: String
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<p>
Welcome:
<a href="https://hx.dcloud.net.cn/" target="_blank">HBuilderX</a>
</p>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">
Vite Documentation
</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>
<button type="button" @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<style scoped>
a {
color: #42b983;
}
</style>三、生命周期：
参考文档：生命周期钩子 | Vue.js
beforeCreate：
在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用。
created：
在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且
$elproperty 目前尚不可用。
beforeMount：
在挂载开始之前被调用：相关的
render函数首次被调用。该钩子在服务器端渲染期间不被调用。
mounted：
在实例挂载完成后被调用，这时候传递给 app.mount 的元素已经被新创建的
vm.$el替换了。如果根实例被挂载到了一个文档内的元素上，当mounted被调用时，vm.$el也会在文档内。 注意mounted不会保证所有的子组件也都被挂载完成。如果你希望等待整个视图都渲染完毕，可以在mounted内部使用 vm.$nextTick：mounted() { this.$nextTick(function () { // 仅在整个视图都被渲染之后才会运行的代码 }) }该钩子在服务器端渲染期间不被调用。
beforeUpdate：
在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
updated：
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或侦听器取而代之。
注意，
updated不会保证所有的子组件也都被重新渲染完毕。如果你希望等待整个视图都渲染完毕，可以在updated内部使用 vm.$nextTick：updated() { this.$nextTick(function () { // 仅在整个视图都被重新渲染完毕之后才会运行的代码 }) }该钩子在服务器端渲染期间不被调用。
beforeUnmount：
在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
该钩子在服务器端渲染期间不被调用。
unmounted：
卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
该钩子在服务器端渲染期间不被调用。
errorCaptured：
在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回
false以阻止该错误继续向上传播。TIP
你可以在此钩子中修改组件的状态。因此在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。
错误传播规则
默认情况下，如果全局的
config.errorHandler被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。如果一个组件的继承链或父级链中存在多个
errorCaptured钩子，则它们将会被相同的错误逐个唤起。如果此
errorCaptured钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。一个
errorCaptured钩子能够返回false以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的errorCaptured钩子和全局的config.errorHandler。
renderTracked：
跟踪虚拟 DOM 重新渲染时调用。钩子接收
debugger event作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
renderTriggered：
当虚拟 DOM 重新渲染被触发时调用。和 renderTracked 类似，接收
debugger event作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。
activated：
被 keep-alive 缓存的组件激活时调用。
该钩子在服务器端渲染期间不被调用。
deactivated ：
被 keep-alive 缓存的组件失活时调用。
该钩子在服务器端渲染期间不被调用。
四：实例方法
$watch：
侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的
data、props或computedproperty 名作为字符串传递。对于更复杂的表达式，用一个函数取代。
$emit：
触发当前实例上的事件。附加参数都会传给监听器回调。
$forceUpdate：
迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
$nextTick：
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法
nextTick一样，不同的是回调的this自动绑定到调用它的实例上。
五：全局 API
如果你使用的是 CDN 构建版本，那么全局 API 可以通过全局对象
Vue来访问，例如：const { createApp, h, nextTick } = Vue如果你使用的是 ES 模块，那么它们可以直接导入：
import { createApp, h, nextTick } from 'vue'
createApp：
返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。
const app = createApp({})你可以在
createApp之后链式调用其它方法，这些方法可以在应用 API 中找到。
h：
返回一个”虚拟节点“，通常缩写为 VNode：一个普通对象，其中包含向 Vue 描述它应在页面上渲染哪种节点的信息，包括所有子节点的描述。它的目的是用于手动编写的渲染函数：
render() { return h('h1', {}, 'Some title') }
defineComponent：
从实现上看，
defineComponent只返回传递给它的对象。但是，就类型而言，返回的值有一个合成类型的构造函数，用于手动渲染函数、TSX 和 IDE 工具支持。
defineAsyncComponent：
创建一个只有在需要时才会加载的异步组件。
defineCustomElement：
该方法接受和 defineComponent 相同的参数，但是返回一个原生的自定义元素，该元素可以用于任意框架或不基于框架使用。
resolveComponent：
WARNING
resolveComponent只能在render或setup函数中使用。如果在当前应用实例中可用，则允许按名称解析
component。返回一个
Component。如果没有找到，则返回接收的参数name。const app = createApp({}) app.component('MyComponent', { /* ... */ })import { resolveComponent } from 'vue' render() { const MyComponent = resolveComponent('MyComponent') }
resolveDynamicComponent：
WARNING
resolveDynamicComponent只能在render或setup函数中使用。允许使用与
<component :is="">相同的机制来解析一个component。返回已解析的
Component或新创建的VNode，其中组件名称作为节点标签。如果找不到Component，将发出警告。import { resolveDynamicComponent } from 'vue' render () { const MyComponent = resolveDynamicComponent('MyComponent') }
resolveDirective ：
WARNING
resolveDirective只能在render或setup函数中使用。如果在当前应用实例中可用，则允许通过其名称解析一个
directive。返回一个
Directive。如果没有找到，则返回undefined。const app = createApp({}) app.directive('highlight', {})import { resolveDirective } from 'vue' render () { const highlightDirective = resolveDirective('highlight') }
withDirectives：
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] ])
createRenderer：
createRenderer 函数接受两个泛型参数：
HostNode和HostElement，对应于宿主环境中的 Node 和 Element 类型。例如，对于 runtime-dom，HostNode 将是 DOM
Node接口，HostElement 将是 DOMElement接口。自定义渲染器可以传入特定于平台的类型，如下所示：
import { createRenderer } from 'vue' const { render, createApp } = createRenderer<Node, Element>({ patchProp, ...nodeOps })
nextTick：
将回调推迟到下一个 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') } } })
mergeProps：
将包含 VNode prop 的多个对象合并为一个单独的对象。其返回的是一个新创建的对象，而作为参数传递的对象则不会被修改。
可以传递不限数量的对象，后面参数的 property 优先。事件监听器被特殊处理，
class和style也是如此，这些 property 的值是被合并的而不是覆盖的。import { h, mergeProps } from 'vue' export default { inheritAttrs: false, render() { const props = mergeProps( { // 该 class 将与 $attrs 中的其他 class 合并。 class: 'active' }, this.$attrs ) return h('div', props) } }
useCssModule：
WARNING
useCssModule只能在render或setup函数中使用。<script> import { h, useCssModule } from 'vue' export default { setup() { const style = useCssModule() return () => h( 'div', { class: style.success }, 'Task complete!' ) } } </script> <style module> .success { color: #090; } </style>
version：
以字符串形式提供已安装的 Vue 的版本号。
const version = Number(Vue.version.split('.')[0]) if (version === 3) { // Vue 3 } else if (version === 2) { // Vue 2 } else { // 不支持的 Vue 的版本 }
六：实例 property
$data：
组件实例正在侦听的数据对象。组件实例代理了对其 data 对象 property 的访问。
$props：
当前组件接收到的 props 对象。组件实例代理了对其 props 对象 property 的访问。
$el：
组件实例正在使用的根 DOM 元素。
对于使用了片段的组件，
$el是占位 DOM 节点，Vue 使用它来跟踪组件在 DOM 中的位置。建议使用模板引用来直接访问 DOM 元素，而不是依赖于$el。
$options：
用于当前组件实例的初始化选项。当你需要在选项中包含自定义 property 时会有用处：
const app = createApp({ customOption: 'foo', created() { console.log(this.$options.customOption) // => 'foo' } })
$parent：
父实例，如果当前实例有的话。
$root：
当前组件树的根组件实例。如果当前实例没有父实例，此实例将会是其自己。
$slots：
用来以编程方式访问通过插槽分发的内容。每个具名插槽都有其相应的 property (例如：
v-slot:foo中的内容将会在this.$slots.foo()中被找到)。defaultproperty 包括了所有没有被包含在具名插槽中的节点，或v-slot:default的内容。在使用渲染函数编写一个组件时，访问
this.$slots会很有帮助。
$refs：
一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。
$attrs：
包含了父作用域中不作为组件 props 或自定义事件的 attribute 绑定和事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过
v-bind="$attrs"传入内部组件——这在创建高阶的组件时会非常有用。
七：内置组件
component：
渲染一个“元组件”为动态组件。依
is的值，来决定哪个组件被渲染。is的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。<!-- 动态组件由 vm 实例的 `componentId` property 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件--> <component :is="$options.components.child"></component> <!-- 可以通过字符串引用组件 --> <component :is="condition ? 'FooComponent' : 'BarComponent'"></component> <!-- 可以用来渲染原生 HTML 元素 --> <component :is="href ? 'a' : 'span'"></component>
transition：
<transition>元素作为单个元素/组件的过渡效果。<transition>只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。<!-- 单个元素 --> <transition> <div v-if="ok">toggled content</div> </transition> <!-- 动态组件 --> <transition name="fade" mode="out-in" appear> <component :is="view"></component> </transition> <!-- 事件钩子 --> <div id="transition-demo"> <transition @after-enter="transitionComplete"> <div v-show="ok">toggled content</div> </transition> </div>const app = createApp({ ... methods: { transitionComplete (el) { // 因为传递了'el'的DOM元素作为参数 } } ... }) app.mount('#transition-demo')
transition-group：
<transition-group>提供了多个元素/组件的过渡效果。默认情况下，它不会渲染一个 DOM 元素包裹器，但是可以通过tagattribute 来定义。注意，每个
<transition-group>的子节点必须有独立的 key，动画才能正常工作。
<transition-group>支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过nameattribute 或配置move-classattribute 自动生成)。如果 CSStransformproperty 是“可过渡” property，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。<transition-group tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </transition-group>
keep-alive：
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在
<keep-alive>内被切换时，它的mounted和unmounted生命周期钩子不会被调用，取而代之的是activated和deactivated。(这会运用在<keep-alive>的直接子节点及其所有子孙节点。)主要用于保留组件状态或避免重新渲染。
<!-- 基本 --> <keep-alive> <component :is="view"></component> </keep-alive> <!-- 多个条件判断的子组件 --> <keep-alive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive> <!-- 和 `<transition>` 一起使用 --> <transition> <keep-alive> <component :is="view"></component> </keep-alive> </transition>注意，
<keep-alive>是用在其一个直属的子组件被切换的情形。如果你在其中有v-for则不会工作。如果有上述的多个条件性的子元素，<keep-alive>要求同时只有一个子元素被渲染。
include和exclude
include和excludeprop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：<!-- 逗号分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- regex (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- Array (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>匹配首先检查组件自身的
name选项，如果name选项不可用，则匹配它的局部注册名称 (父组件components选项的键值)。匿名组件不能被匹配。
max最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
<keep-alive :max="10"> <component :is="view"></component> </keep-alive>WARNING
<keep-alive>不会在函数式组件中正常工作，因为它们没有缓存实例。
slot：
<slot>元素作为组件模板之中的内容分发插槽。<slot>元素自身将被替换。详细用法，请参考下面教程的链接。
teleport：
to-string。需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动<teleport>内容的目标元素<!-- 正确 --> <teleport to="#some-id" /> <teleport to=".some-class" /> <teleport to="[data-teleport]" /> <!-- 错误 --> <teleport to="h1" /> <teleport to="some-string" />
disabled-boolean。此可选属性可用于禁用<teleport>的功能，这意味着其插槽内容将不会移动到任何位置，而是在你在周围父组件中指定了<teleport>的位置渲染。<teleport to="#popup" :disabled="displayVideoInline"> <video src="./my-movie.mp4"> </teleport>请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。
八、应用配置
errorHandler：
app.config.errorHandler = (err, vm, info) => { // 处理错误 // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子 }指定一个处理函数，来处理组件渲染函数和侦听器执行期间抛出的未捕获错误。这个处理函数被调用时，可获取错误信息和相应的应用实例。
warnHandler：
app.config.warnHandler = function(msg, vm, trace) { // `trace` 是组件的继承关系追踪 }为 Vue 的运行时警告指定一个自定义处理函数。注意这只会在开发环境下生效，在生产环境下它会被忽略。
globalProperties：
app.config.globalProperties.foo = 'bar' app.component('child-component', { mounted() { console.log(this.foo) // 'bar' } })添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突时具有优先权。
这可以代替 Vue 2.x 的
Vue.prototype扩展：// 之前 (Vue 2.x) Vue.prototype.$http = () => {} // 之后 (Vue 3.x) const app = createApp({}) app.config.globalProperties.$http = () => {}
optionMergeStrategies：
const app = createApp({ mounted() { console.log(this.$options.hello) } }) app.config.optionMergeStrategies.hello = (parent, child) => { return `Hello, ${child}` } app.mixin({ hello: 'Vue' }) // 'Hello, Vue'为自定义选项定义合并策略。
合并策略选项分别接收在父实例和子实例上定义的选项的值作为第一个和第二个参数。
performance：
设置为
true以在浏览器开发工具的 performance/timeline 面板中启用对组件初始化、编译、渲染和更新的性能追踪。只适用于开发模式和支持 performance.mark API 的浏览器。
compilerOptions 3.1+：
配置运行时编译器的选项。设置在这个对象上的值将会被传入浏览器内的模板编译器，并影响配置过的应用内的每个组件。注意，你也可以使用 compilerOptions 选项在每个组件的基础上覆写这些选项。
重要
该配置选项只在完整的构建版本中生效 (即可以在浏览器中编译模板的独立版
vue.js)。如果你使用的是附带额外构建设置的仅运行时版本，编译器选项必须通过构建工具的配置传入@vue/compiler-dom以替代。
对
vue-loader来说：通过 compilerOptions loader 选项传入。也可以查阅 vue-cli 中的配置方式。对
vite来说：通过 @vitejs/plugin-vue 选项传入。
isCustomElement：
// 任何以 'ion-' 开头的元素都会被识别为自定义元素 app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')指定一个方法来识别 Vue 以外 (例如通过 Web Components API) 定义的自定义元素。如果一个组件匹配了这个条件，它就不需要在本地或全局注册，Vue 也不会抛出
Unknown custom element的警告。注意所有的原生 HTML 和 SVG 标记都不需要被这个函数匹配——Vue 的解析器会自动进行这项检查。
whitespace：
app.config.compilerOptions.whitespace = 'preserve'默认情况下，Vue 会移除/压缩模板元素之间的空格以产生更高效的编译结果：
- 元素内的多个开头/结尾空格会被压缩成一个空格
- 元素之间的包括折行在内的多个空格会被移除
- 文本结点之间可被压缩的空格都会被压缩成为一个空格
将值设置为
'preserve'可以禁用 (2) 和 (3)。
delimiters：
// 将分隔符设置为 ES6 模板字符串风格 app.config.compilerOptions.delimiters = ['${', '}']用于配置模板内文本插值的分隔符。
这个选项一般会用于避免和同样使用双大括号语法的服务端框架发生冲突。
comments：
app.config.compilerOptions.comments = true默认情况下，Vue 会在生产环境下移除模板内的 HTML 注释。将这个选项设置为
true可以强制 Vue 在生产环境下保留注释。而在开发环境下注释是始终被保留的。这个选项一般会用于依赖 HTML 注释的其它库和 Vue 配合使用。
7774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
