VUE3.0
2020-12-30 11:37:44 0 举报AI智能生成
VUE3.0 新鲜出炉整理的学习脑图
作者其他创作
大纲/内容
概念
VUE基础
安装
介绍
APP 实例
模板语法
计算属性(computed)和 Watchers
CSS样式绑定
v-bind:class
v-bind:stytle
条件渲染(Conditional Rendering)
v-if
v-else
在 <template> 上使用 v-if 可包裹 多个元素
v-else-if
v-show
v-show的元素始终被渲染保留在DOM中,只是简单切换CSS dispaly 属性
不支持 <template>
v-if 与 v-for 一起使用
列表渲染(List Rendering)
v-for 基于 数组 来渲染一个列表
item in itmes 语法
items 数据源数组
item 被迭代的数组元素的别名
v-for 块中 能访问到 所有父作用域的属性
v-for 支持 第二个可选项的参数,即当前项的索引
(item, index) in items
也可以用 of 代替 in
v-for 里使用 对象,来遍历对象的属性
"value in myObject" 语法
"(value, name) in myObject"
"(value, name, index) in myObject"
维护状态
vue 通过"就地更新"的策略 来渲染v-for渲染的列表
为便于 vue 能跟踪到每个节点的身份 ,从而重用或重排现有的元素,需提供一个 唯一的 key 属性
使用 字符串或数组类型 作为key
:key="item.id"
数组更新检查
Mutation Methods
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
Replaceing an Array
filter()
concat()
slice()
通常创建一个计算属性来返回 过滤/排序 后的结果
"n in evenNumbers" 语法
在嵌套的 v-for循环张 可以时方法
"n in even(numbers)" 语法
v-for 里接受值的范围
"n in 10" 语法
在 <template> 中 使用 v-for, 类似于 v-if 来渲染一段包含多个元素的内容
在 组件中 使用 v-for
类似于 普通元素一样使用 v-for
传递数据使用 prop
事件处理(Event Handing)
事件监听
v-on 或 @ 简写 ,来监听DOM 事件
v-on:click="methodName"
@click="methodName"
事件处理
方法名
接受一个参数 event
event 为 原生 DOM 事件
内联 JavaScript 语句中调用方法
通过 $event 访问原始DOM事件
多个事件处理方法,用 逗号隔开
<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">
Submit
</button>
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
按键修饰符
表单输入绑定(From Input Binding)
v-model介绍
text and textarea elements use value property and input event
checkboxes and radiobuttons use checked property and change event
select fields use value as a prop and change as an event
基本使用
Text
Multiline text
CheckBox
单个Checkbox, boolean value
多个Checkbox, 绑定到同一个数组
Radio
Select
Single Select <建议默认提供一个具体由空值的禁用选项>
Multiple Select (bound to Array)
Value Bindings
Chcekbox
Redio
Select Options
修饰符(Modifiers)
.lazy
默认 v-mode 在input事件后同步输入的数据,使用lazy修饰符替换到change事件后同步
.number
输入类型自动转换为数字型
.trim
在组件中使用 v-model
组件基础(Component Basic)
组件是可重用的实例,即接受同根实例相同的选项 (如:data computed watch methods lifecycle hooks), 除根实例特色的选项,如 el.
Reusing Components
每次使用组件时,都会创建组件的新实例.
Organizing Components
通常一个APP可以看成一个嵌套的组件树
组件注册
global
可用在根实例下的所有模板内部使用
local
Props <传递数据至子组件>
将值传递给 Props属性,将成为组件实例的属性.
props 属性接受任意数量,任意类型的值
可以 v-bind 绑定动态数据至props属性
监听子组件事件
v-on 或 @ 来监听 子组件通过 $emit('事件名') 来引发的事件,从而改变数据绑定值,而更新DOM
事件名 需写入 组件的 emits 属性中,这样以便check 组件引发的所有事件.
通过事件发送一个值
子组件发送 : $emit('事件名',须发送的值)
父组件接收
通过$event 访问事件发送的值
<blog-post ... @enlarge-text="postFontSize += $event"></blog-post>
如果事件处理程序是一个方法
html
<blog-post ... @enlarge-text="onEnlargeText"></blog-post>
js
methods: {
onEnlargeText(enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
在组件中使用 v-model
通过插槽分发内容给子组件 (content Distrbution with Slots)
组件模板中通过 <slot>元素接收分发的内容
<slot> 放在任何需要渲染的位置即可
动态组件(Dynamic Components)
<component :is="currentTabComponent"></component>
组件注册名
组件选项对象
可与 其他HTML元素一起正常使用,即被视为组件,则所有属性被绑定为DOM属性
.prop 修饰符 绑定 属性值
DOM 模板解析注意事项
组件进阶(Component InDepth)
组件注册<Registration>
组件名
Kebab-case <短横线分割>
app.component('my-component-name', {
/* ... */
})
PascalCase<首字母大写>
app.component('MyComponentName', {
/* ... */
})
直接在DOM使用时,仅Kebab-case有效
使用字符串模板时,两者都可以
全局注册
Vue.createApp({...}).component('my-component-name', {
// ... options ...
})
局部注册
使用 components 选项 注册
属性名 就时自定义元素的名称
属性值 就时这个组件的选项对象
局部注册的组件在其子组件中不可以用.如果要使用,则按照如下方式.
先声明组件A
const ComponentA = {
/* ... */
}
在组件B中调用A
const ComponentB = {
components: {
'component-a': ComponentA
}
// ...
}
在ES2015+
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
}
// ...
}
ComponentA 的变量名其实是 ComponentA：ComponentA 的缩写
变量名 同时是:
1.在模板中的自定义元素名称
2.组件选项的变量名
模块系统
创建components文件夹
每个组件放着当都的文件夹中
利用 模块 import 模块导入各组件
Props
Props Types <Prop类型>
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
props:[] 字符串数组
传递静态或动态Props<Passing Static or Dynamic Props>
静态 直接传输字符串
动态 v-bind:属性( 或直接用v-bind ="对象名" 传递整个对象 ) 1.字符串 赋值,实际是告诉VUE 是一个 JavaScript表达式 2.变量 赋值
单向数据流 <One-Way Data Flow>
父级组件 Prop 更新会流向 子组件,反过来不可以
父级组件 发生变更时,子组件的所有prop 都会刷新成最新的.
不应该在 子组件中 更改prop,否则 Vue发处警告
当需要在子组件中 更改接收到Props值时,使用一下两种方式
props 数据接收做为初始值,将来在子组件中本地使用,定义 data 属性数据来接收
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
}
}
props 数据接收做为原始值需要转换时,则定义计算属性来使用props数据做相应转换.
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
当然 Prop 传入 数组 或 对象,在子组件中变更将会影响父组件的状态
Prop验证 <Prop Validation>
提供一个带有验证需求的对象,而不是一个字符串数组
Type 检查
String
Number
Boolean
Array
Object
Data
Function
Symbol
Prop 大小写检查
camelCase
kebab-case
props validation 在组件实例创建之前验证,所以 实例的属性 在验证函数中不可用.
No-Prop Attributes
单 根节点 Attributes 继承
当组件返回单个根节点时, No-Prop自动添加到 根节点的属性中. 且在子组件件中 通过 $arrs 获取相应的 Non-Prop
属性
事件
禁用 Attribute 继承
有 inheritAttrs: false ,v-bind="$arrts" 在非根元素上,则 非根元素渲染到 Non-Prop
有 inheritAttrs: false ,v-bind="$arrts" 在根元素上,则 根元素渲染到 Non-Prop
无 inheritAttrs: false ,v-bind="$arrts" 在非根元素上,则 所有元素渲染到 Non-Prop
无 inheritAttrs: false ,v-bind="$arrts" 在根元素上,则 仅根元素渲染到 Non-Prop
可访问组件的 $arrts 属性,其中有组件 props和 emits 属性中未包含的属性(如 : class style v-on 等)
多 根节点 Attributes继承
多个根节点的组件不具有自动 attribute 回退行为
需要显式绑定 v-bind="$attrs"
自定义事件
事件名称
v-on 事件监听器在 DOM 模板中会被自动转换为全小写 ((因为 HTML 是大小写不敏感的))
推荐你始终使用 kebab-case 的事件名
定义自定义事件
emits:['in-focus', 'submit'] 选项在组件上定义已发出的事件
验证 Emitted Events
类似于 Prop的验证,使用对象语法即可验证,而不是用数组语法
添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效
自定义 v-model 参数
即 修改 v-mode 默认的绑定属性modelValue 为自定义值即可
app.component('my-component', {
props: {
foo: String
},
template: `
<input
type="text"
:value="foo"
@input="$emit('update:foo', $event.target.value)">
`
})
多个 v-model 绑定
处理 v-model 修饰符
内置修饰符
.trim
.number
.lazy
自定义修饰符 通过 modelModifers prop提供给组件
modelModifers 为默认的空对象
modelModifers 值组件的created生命周期函数触发时即已生成,值为 {自定义的修饰符:true} .例如: { capitalize: true }
带参数的v-model 绑定
prop 名称为 arg + "Modifiers"
Slots 插槽
Slot Content
使用<slot>元素作为承载分发内容的出口
插槽内容可以是
字符串
模板代码
html
其他组件
如果组件模板中没有<slot>元素,则该组件标签中的任何内容都被忽略
Render Scope
插槽可以访问与 模板其余部分相同 的实例属性,即 相同的作用域
父模板里所有内容都是在父级作用域中编译
子模板里所有内容都是在子作用域中编译
Fallback Content
<slot>Submit</slot>
Named Slots <针对多插槽>
组件创建时 ,利用 name 属性提供名称
<header>
<slot name="header"></slot>
</header>
组件使用时, 利用 <template> 元素上的 v-slot 指令,指定具体的插槽名称. 以参数形式:v-slot:header 这样 tmplate 元素之间所有内容渲染到相应的插槽中.
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
Scope slot
绑定在<slot>元素上的属性,叫插槽props
<ul>
<li v-for="( item, index ) in items">
<slot v-bind:item="item"></slot>
</li>
</ul>
在父级作用域中,利用带值的 v-slot 来定义提供的组件中提供的插槽prop的名字
<todo-list>
<template v-slot:default="slotProps">
<i class="fas fa-check"></i>
<span class="green">{{ slotProps.item }}<span>
</template>
</todo-list>
只有默认插槽时的语法
<todo-list v-slot="slotProps">
<i class="fas fa-check"></i>
<span class="green">{{ slotProps.item }}<span>
</todo-list>
默认插槽的缩写语法不能和具名插槽混用,会导致作用域不明确
解析 Slot Props
作用域插槽的内部工作原理是将你的插槽内容包裹在一个传入单个参数的函数
v-slot 值可以时任何能够函数定义中参数的javascript 表达式
利用ES2015 解构具体 插槽Prop
解构
<todo-list v-slot="{ item }">
<i class="fas fa-check"></i>
<span class="green">{{ item }}<span>
</todo-list>
重命名
<todo-list v-slot="{ item: todo }">
<i class="fas fa-check"></i>
<span class="green">{{ todo }}<span>
</todo-list>
定义备用内容
<todo-list v-slot="{ item = 'Placeholder' }">
<i class="fas fa-check"></i>
<span class="green">{{ item }}<span>
</todo-list>
Dynamic Slot Names
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>
具名插槽缩写
v-slot: ( # )
缩写只在其有参数的时候才可用
Provide/inject
对具有多层嵌套的组件中传值利用原先的props 有点力不从新. 因此 vue 引入 Provider / Inject
Provide : 父组件为所有 子组件提供数据
父组件不需要知道哪些子组件使用 Provide 中提供的值
Inject : 子组件使用这个数据.
子组件不需要知道 inject 属性里的值 来之哪里
Dynamic&Async Componets
keep-alive
Async comonets
defineAsyncComponent
suspens 挂起的
Template refs
ref 属性
可在组件本身 添加 另一个 ref ,使用它 可从父组件触发 focusInput 事件
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput.focusInput()
ref 与 v-for 一起使用式,dedao ref将式一个数组
$refs 仅在组件渲染后填充. 避免在模板和计算属性中访问$refs
处理边界问题
强制更新
v-onec
Transition & Animation
Reusability & Composition
Mixins
basic
示例
选项合并
数据对象合并 : 并在发生冲突时以组件数据优先
同名的钩子函数 : 将合并为一个数组, 混入对象的钩子将在组件自身的钩子之前调用.
值为对象的选项 : 如(methods componts dirrectives)将被合并为同一个对象. 两个对象的键名冲突时,取 组件对象的键值对.
全局 Mixin
为自定义选项注入一个处理器
自定义选项合并策略<strategy>
const app = Vue.createApp({})
app.config.optionMergeStrategies.customOption = (toVal, fromVal) => {
// return mergedVal
}
Custom Directives
全局注册指令
app.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
mounted(el) {
// Focus the element
el.focus()
}
})
局部注册指令
directives: {
focus: {
// 指令的定义
mounted(el) {
el.focus()
}
}
}
在模板中的任何元素使用上述自定义的指令了,以 v- 开头加 自定义的指令名称
如: <input v-focus />
自定义指令 在Hook Functions<钩子函数>中被调用
beforeMount
当指令第一次绑定到元素,且挂载到父组件之前调用
可用作一次性的初始化设置
mounted
在挂载 绑定元素的父组件时调用
beforeUpdate
在更新包含组件的 VNODE 之前调用
updated
在包含组件的VNODE级子组件的VNODE 更新后调用
beforeUnmont
在卸载绑定元素的父组件时调用
unmounted
当指令与元素解除绑定且父组件已卸载时,只调用一次
钩子函数的参数
即 el ,binding ,vnode , prevVnode
动态指令参数
v-mydirective:[argument]="value"
binding.arg 可获取到 动态指令参数
binding.value 可获取到 动态指令值
指令值 可绑定到表单元素上 动态 获取
mounted updated 触发相同行为时,函数可简写
app.directive('pin', (el, binding) => {
el.style.position = 'fixed'
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
})
指令函数接受所有合法的js表达式
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
app.directive('demo', (el, binding) => {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
在组件中使用
Teleport
允许控制在DOM中哪个父节点下呈现HTML
包裹在 内置的组件 <teleport> </teleport> 标签内
与组件一起使用
如果 <telport> 包含vue compnonent ,则仍是<telport>父组件的逻辑子组件
多个<Teleport> 组件可以将其内容 挂载到同一个元素
Render Functions
render() 渲染函数
render() {
return Vue.h('h1', {}, this.blogTitle)
}
Html模板
<h1>{{ blogTitle }}</h1>
DOM树
Virtual DOM Tree 即 所有VNODE 组成的树
Vue.h()
createNodeDescription 告诉VUE 页面上需要渲染什么样的节点及子节点的描述信息 即虚拟节点 (Vnode)
h() 函数创建一个VNODE的实用程序,接受3个参数
tag
{String | Object | Function | null} ,一个 HTML 标签名、一个组件、一个异步组件，或者 null,使用 null 将会渲染一个注释
[ props 与 attribute、prop 和事件相对应的对象 ]
[ vnode ] 子节点
{String | Array | Object} children
使用 `h()` 构建的子 VNodes,
使用字符串获取 "文本 Vnode"
有 slot 的对象
使用 JS 代替模板功能
v-for v-if
v-model
v-on
事件修饰符
slots
JSX
Plugings
由 Vue 的 createApp生成的app 对象
由 用户传入的选项
Reactivity
Reactivity In Depth
What is Reactivity
Detect when there’s a change in one of the values
Track the function that changes it
Trigger the function so it can update the final value
vue 如何追踪其变化
data 选项传递给应用或组件实例的时候,VUE使用带有getter和setter的处理程序遍历器所有属性,将其转换为 Proxie. Proxy 是仅ES6 提供的功能
vue3 也保留了Object.defineProperty 来支持IE
Proxy 是一个包含另一个对象或函数并允许对其拦截的对象
new Proxy (target,handler)
跟踪更改它的函数 在Proxy中的getter中执行此操作称为 effect
触发函数以便它可以更新最终值. 在Proxy中setter中进行该操作,名为 trigger
把对象包装在Proxy里同时可以对其拦截.这种拦截被称为 陷阱 trap
Reflect.get(...argument) 返回被代理的对象
在内容发生变更时设置新的值 , track函数
track(target,prop)
Proxy对象在vue内部被设置为响应式对象,因此始终会返回同一个对象的Proxy版本
Watchers
每个组件实例都有一个相应的 watcher 实例来记录组件渲染时的所有的属性记录设置为依赖项
当 依赖项的 setter 被触发时, 则会通知 侦听器,,从而使得组件重新渲染
Reactivity Fundamentals
声明响应式状态, 使用 reactive( ) 方法
返回一个响应式的对象
该响应式转换是深度的, 它会影响所有嵌套的属性
因为依赖跟踪的关系,当响应式的对象改变时,视图会自动更新
当组件中的 data() 返回一个对象时, 它在内部交由 reactive() 使其成为响应式的对
ref() 返回一个可变的响应式对象,该对象只包含一个名为 value 的属性
当 ref 作为渲染上下文( setup () 中的返回对象) 上的属性返回 并可以在模板中访问时,它将自动展开为内部值 ,不需要在模板中追加 .value
当 ref 在 Reactive() 对象中 被访问 或 更改时, 会自动展开为内部值,
ref 自动展开 仅发生在被响应式的对象嵌套的时候. 当从 array 或原生集合 类型 如 map 访问 ref时,不会进行展开
响应式状态解构
利用 ES6的解构功能式 要利用 toRefs() 将响应式对象转化为一组 ref . 这些ref 将保留与源对象的响应式关联 ,其中 通过 .value 获取解构后的内部值
使用 readonly 防止 响应式对象被更改
基于原始对象创建一个只读的proxy对象 . readony()
Computed and Watch
有依赖其他状态的状态,在vue component中使用computed
get
set
watchEffect()
它传入一个函数,同时响应式追踪其依赖, 并在依赖变更时重新运行该函数.
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> logs 0
setTimeout(() => {
count.value++
// -> logs 1
}, 100)
在组件的 setup() 函数 或 生命周期钩子中被调用时, 侦听器 被链接到组件的生命周期,并在组件卸载时自动停止
该函数 返回 一个 stop handler ,可以被显示的调用已停止该侦听器
const stop = watchEffect(() => {
/* ... */
})
// later
stop()
Effect
Side Effect Invalidation < OnInvalidate >
the effect is about to re-run
the watcher is stop
Effect Flush Timing
Vue的响应式系统会缓存 invalidated effects ,而且会异步的刷新他们,
这样可避免 在同一个 "tick" 中多个状态改变导致不必要的重复调用
组件的updtae() 函数 也是一个 watcher effect
如果在组件更新后重新运行 一个 watecher effect ,可 在 watchEffect() 函数中,传入一个 flush 附加选项
flush : pre, post sync
之所以是通过传入一个函数去注册失效回调，而不是从回调返回它，是因为返回值对于异步错误处理很重要
watcher Debugging 接收一个包含所有依赖信息的调试器事件
onTrack
will be called when a reactive property or ref is tracked as a dependency
onTrigger
will be called when the watcher callback is triggered by the mutation of a dependency
watch()
完全等同于组件的 watch 属性
requires watching a specific data source < 特点数据源>and applies side effects in a separate callback function <处理回调函数>
watching a single source
A watcher data source
a getter function that returns a value
directly a ref
Watching Multiple Sources
使用数组 同时监控多个数据源
与 watchEffect() 共享
manual stoppage,
side effect invalidation
做为第三个参数传入
flush timing
debugging.
Compostion API
Introduction
setup API在组件创建之前执行, Props 被解析后, 即 compostion api 的入口
setup 选项中没有 this,除了 props之外,无法访问组件声明的任何属性-- local state ,computed properties and method
setup() 是一个函数
props 参数
context 参数
setup 返回的所有内容都将暴给组件的其他部分(计算属性 方法 生命周期函数 及组件的模板)可使用.
Reactive Variables with ref
import { ref } from 'vue'
const counter = ref(0)
ref 函数 创建响应式变量.
ref 函数 返回包含一个唯一 的 value 属性的对象
{ value: 0 }
在对象中包装值似乎不必要，但在 JavaScript 中保持不同数据类型的行为统一是必需的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值传递的，而不是通过引用传递的
使用 该value属性可返问或更改响应式变量的值
// 0
setup 内部注册生命周期钩子
composition API上的生命周期钩子与 Option API 的名称相同,需前缀为on ,如: onMounted ,onUpdate
composition API上的生命周期钩子函数接收一个回调函数,在组件调用钩子函数时被触发
Reacting to Changes with watch
watch() 函数 接收3个参数
A Reactive Reference or getter function that we want to watch
A callBack
Optional configuration options
toRefs()
Standalone computed properties
与 ref 和 watch 类似,通过从 vue 导入的 computed函数,计算属性也可以在vue组件外被创建
computed () 返回一个只读的 响应式引用
standalone composition function
Setup
参数
props
正如标准组件一样 , props 在 setup 函数内是响应式的,当然传入新的prop时,它将被更新
因为 props 时响应式的,不能直接利用ES6的特性 直接解构. 如需解构,子 setup 函数中 利用 toRefs () 来完成此操作
context <js 对象暴露组件的三个属性> 可直接通过ES6解构
attrs
slots
emit
Accessing Component Properties
props
attrs
slots
emit
Usage With Templates
如果 setup 返回一个对象,则可以在组件的模板中像传递给setup的props属性一样,访问该对象的属性
setup 返回的对象中 包含的 ref 在模板中访问时是被自动解开<automatically unwrapped>, 无需通过.value 访问
Usage With Render Functions
如果 setup 返回一个渲染函数,该函数可以使用在同一作用域中声明的响应式状态
样例
Usage of this
Lifecycle Hooks
beforeCreate
不需要
created
不需要
beforeMount
onBeforeMount
mounted
onMounted
beforeUpdate
onBeforeUpdate
updated
onUpdated
beforeUnmount
onBeforeUnmount
unmount
onUnmount
errorCaptured
onErrorCptured
renderTracked
onRenderTracked
renderTriggered
onRenderTriggered
Provide / Inject
两者只能在当前活动的实例的setup()中调用
Using Provide
1.先在 vue 中导入 provide方法 来定义每个属性
import { provide } from 'vue'
2.provide() 接受两个参数
属性名称 , <string>类型
属性值,
Using Inject
1.先在 vue 中导入 inject方法
2.inject() 接受两个参数
要注入的属性名称
一个默认值 (此参数 可选)
Reactivity
使用 ref() 或 reactive() 来增加 provide 和 inject 值之间的响应性
当使用响应式provide和inject 时,建议尽可能的 在 provide 里 保持任何响应式属性的更改
有时需要在注入数据的组件内部需要更新注入的数据 . 则 在建议提供一个方法来负责改变响应式的属性
如果要确保 通过 provide 传递的数据不会被注入的 组件更改, 则对 provide 的属性使用 readonly
Template Refs
在使用 composition API 时, reactive refs 和 template refs 概念时统一的.
模板内声明 ref 属性,可获得模板内元素和组件实例的引用 且可从 setup() 返回它
如果 VNode 的 ref 键对应于渲染上下文中的 ref，则 VNode 的相应元素或组件实例将被分配给该 ref 的值
模板引用只会在初始渲染之后获得赋值
模板中使用ref 与其他 ref 一样是响应式的. 可以传递到(或从中返回)复合函数
JSX 的用法
v-for 的用法
API
Application API
1.config 包含应用配置的对象
errorHandler
app.config.errorHandler = (err, vm, info) => {
// 处理错误
// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
}
warnHandler
app.config.warnHandler = function(msg, vm, trace) {
// `trace` 是组件的继承关系追踪
}
为 Vue 的运行时警告指定一个自定义处理函数。注意这只会在开发环境下生效，在生产环境下它会被忽略。
globalProperties
在应用程序内的任何组件实例中可访问的全局属性
属性名冲突时，组件的 property 将具有优先权
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
isCustomElement
optionMergeStrategies
performance
2.component
参数
1. {string} name
2. {Function | Object} definition (optional)
如果传入definition参数,则返回应用实例
如果不传入definition参数,则返回组件定义
用法
注册或检索全局组件。注册还会使用给定的 name 参数自动设置组件的 name
示例
3.directive
参数
1.{string} name
2.{Function | Object} definition (optional)
用法
Register or retrieve a global directive
钩子函数参数
el
指令绑定到的元素.这可用于直接操作DOM
binding 包含以下属性的对象
instance
使用指令的组件实例
value
传递给指令的值
oldValue
先前的值.仅在 beforeUpdate 和 updated 函数中可用
arg
传递给指令的参数
v-my-directive:foo 中，arg 为 "foo"
modifiers
包含修饰符 (如果有) 的对象
例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}
dir
一个对象，在注册指令时作为参数传递
vnode
作为 el 参数收到的真实 DOM 元素的蓝图
prevNode
上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用
注意点: 除 el 之外, 其他参数应设置成只读,不要修改. 如需要跨钩子共享信息, 通过定义元素的 自定义数据集来实现
示例
4.mixin
参数
{Object} mixin
5.mount
6.provide
参数
{string | Symbol} key
value
7. unmount
8. use
参数
{Object | Function} plugin
...options (optional)
用法
安装vue.js插件.如何插件是一个对象,它必须暴露一个instal 方法,如果它本身是一个函数,它将被视为安装方法.
Global API
createApp
第一个参数 : 接收一个根组件选项对象
使用第二个参数, 将prop 传递给应用程序
h
返回一个虚拟节点
defineComponent
defineAsyncComponent
resloveComponent
resloveDynmaicComponent
resolveDirective
withDirectives
createRenderer
nextTick
将回调推迟到下一个 DOM 更新周期之后执行
Options
Data
1.data (Function)
2.props (Array<string> | Object)
props 可以是数组或对象，用于接收来自父组件的数据
如果是对象,可用进行 类型检测 自定义验证 和 设置默认值
type
default
required
validator
3.computed { [key: string]: Function | { get: Function, set: Function } }
4.methods { [key: string]: Function }
5.emits Array<string> | Object
DOM
6.template (string)
一个字符串模板被用来标识组件实例
7.render (Function)
8.Lifecycle Hooks
生命周期钩子函数自动绑定到this 上下文实例中.
钩子函数不能用箭头函数, 箭头函数的this 绑定的是父 上下文
Assets
9.directives
包含组件实例可用指令的哈希表
10.components
包含组件实例可用组件的哈希表
Composition
11.mixins ( Array<Object> )
12.extends ( Object | Function )
允许声明扩展另一个组件
13.provide / inject
provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }
14.setup Composition API的入口
调用时间: 创建组件实例时, 解析prop 后立即调用 setup() . 在beforCreate钩子之前调用
模板使用: 如果 setup返回一个对象,则该对象的属性将合并到组件模板的渲染上下文中
渲染函数 / JSX 使用 : setup 还可用返回一个渲染函数(Render Function), 该函数可用直接使用在同一作用域中声明的反应状态
参数
第一个参数 props
可通过 watchEffect 和 watch 侦听
第二个参数 context
attrs
slots
emit
Misc (杂项)
15.name
16.delimters
17.inheritAttrs
Instance Properties
$data
$props
$el
$options
$parent
$root
$slots
$refs
$attrs
Instance Methods
$watch
$emit
$forceUpdate
$nextTick
0 条评论
下一页
