vue3新特征和所有的属性,方法汇总及其对应源码分析
ztj100 2024-11-26 11:14 23 浏览 0 评论
vue3新特征汇总与源码分析
(备注:vue3使用typescript编写)
何为应用?
const app = Vue.createApp({})
app就是一个应用。
应用的配置和应用的API就是app应用的属性和方法。
1.应用配置:
- performance:开启浏览器的性能监控。值为true|false
- optionMergeStrategies:option选项的合并策略
- globalProperties:扩展实例的属性和方法
- isCustomElement:判断哪些标签为自定义组件
- errorHandler:错误时的处理函数
- warnHandler:警示时的处理函数
export interface AppConfig {
// @private
readonly isNativeTag?: (tag: string) => boolean
performance: boolean
optionMergeStrategies: Record<string, OptionMergeFunction>
globalProperties: Record<string, any>
isCustomElement: (tag: string) => boolean
errorHandler?: (
err: unknown,
instance: ComponentPublicInstance | null,
info: string
) => void
warnHandler?: (
msg: string,
instance: ComponentPublicInstance | null,
trace: string
) => void
}
2.应用API:
- version:版本号
- config:应用的配置信息
- use:引入插件
- mixin:引入混合器
- component:引入组件
- directive:引入指令
- mount:挂载组件
- unmount:卸载组件
- provide:全局提供状态,与inject结合使用
export interface App<HostElement = any> {
version: string
config: AppConfig
use(plugin: Plugin, ...options: any[]): this
mixin(mixin: ComponentOptions): this
component(name: string): Component | undefined
component(name: string, component: Component): this
directive(name: string): Directive | undefined
directive(name: string, directive: Directive): this
mount(
rootContainer: HostElement | string,
isHydrate?: boolean
): ComponentPublicInstance
unmount(rootContainer: HostElement | string): void
provide<T>(key: InjectionKey<T> | string, value: T): this
// internal, but we need to expose these for the server-renderer and devtools
_uid: number
_component: ConcreteComponent
_props: Data | null
_container: HostElement | null
_context: AppContext
}
2.1应用上下文:
export function createAppContext(): AppContext {
return {
app: null as any,
config: {
isNativeTag: NO,
performance: false,
globalProperties: {},
optionMergeStrategies: {},
isCustomElement: NO,
errorHandler: undefined,
warnHandler: undefined
},
mixins: [],
components: {},
directives: {},
provides: Object.create(null)
}
}
3.全局API:
4.选项:
Data:
- data:值类型为Function,
- props:值类型为object|array
- computed:值类型为{ [key: string]: Function | { get: Function, set: Function } }
- methods:值类型为{ [key: string]: Function }
- watch:值类型为{ [key: string]: string | Function | Object | Array}
- emits:类型为Array | Object
DOM:
- template:值类型为string
- render:值类型为Function
生命周期钩子:
beforeCreate,
created,
beforeMount,
mounted,
beforeUpdate,
updated,
beforeUnmount,
uonUnmounted,
activated,
deactivated,
renderTracked,
renderTriggered,
errorCaptured
资源:
- directives:值类型为Object
- components:值类型为Object
- 自定义指令的参数选项,特别说明:
- 参数为对象:
- export interface ObjectDirective<T = any, V = any> {
created?: DirectiveHook<T, null, V>
beforeMount?: DirectiveHook<T, null, V>
mounted?: DirectiveHook<T, null, V>
beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>
updated?: DirectiveHook<T, VNode<any, T>, V>
beforeUnmount?: DirectiveHook<T, null, V>
unmounted?: DirectiveHook<T, null, V>
getSSRProps?: SSRDirectiveHook
} - //指令的钩子函数的参数:
export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (
el: T,
//绑定的修饰符,属性,值,指令名称等信息在binding里面
binding: DirectiveBinding<V>,
vnode: VNode<any, T>,
prevVNode: Prev
) => void - export interface DirectiveBinding<V = any> {
instance: ComponentPublicInstance | null
value: V
oldValue: V | null
arg?: string
modifiers: DirectiveModifiers
dir: ObjectDirective<any, V>
}
组合:
- mixins:值类型为Array
- extends:值类型为Object | Function
- provide:值类型为Object | () => Object
- inject:值类型为Array | { [key: string]: string | Symbol | Object }
- setup:值类型为Function
杂项:
- name:值类型为string。组件名称
- delimiters:
- inheritAttrs:值类型为boolean
5.实例属性(property):
- this.$data:
- this.$props:
- this.$el:
- this.$options:
- this.$root:
- this.$parent:
- this.$slots:
- this.$refs:
- this.$attrs:
6.实例方法:
- this.$watch():
- this.$emit():
- this.$forceUpdate():
- this.$nextTick():
7.指令:
- v-text:处理文本
- v-html:处理html
- v-show:显示与隐藏,dom已经渲染好
- v-if:满足条件才开始渲染,否则不渲染
- v-else:满足条件才开始渲染,否则不渲染
- v-else-if:满足条件才开始渲染,否则不渲染
- v-for:遍历列表
- v-on:绑定事件
- v-bind:绑定属性
- v-model:绑定表单的变量
- v-slot:绑定插槽具名,缩写:#
- v-one:标签只渲染一次
- v-is:绑定动态组件
- v-pre:
- v-cloak:
8.特殊指令:
- key:处理列表循环的key
- ref:处理标签的ref。类似于id
- is:处理动态组件,绑定组件的命名
9.内置组件:
- component:自定义组件,与:is一起使用
- transition:过度组件
- transition-groud:过度组件组
- keep-alive:缓存不活动的组件
- slot:插槽组件
- teleport:转移组件
10.响应式API:
import {reactive,readonly} from 'vue'
响应性基础api:
- reactive: 实现响应式对象,包括嵌套对象都是响应式对象,返回proxy代理对象
- readonly:实现对象只读,包括嵌套对象都为只读,返回proxy代理对象
- isProxy:判断是否是代理对象
- isReactive:判断是否是响应式对象
- isReadonly:判断是否是只读对象
- toRaw:入参为响应式对象,返回原始对象。
- markRaw:标志原始对象,不能再实现响应式对象。
- shallowReactive:浅相应式对象,只有第一层属性为响应式对象,嵌套对象不属于响应式对象。
- shallowReadonly:浅只读对象,只有第一层属性为只读对象,嵌套对象不属于只读对象,可以修改嵌套对象的属性。
Refs
- ref:接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value
- unref:返回对象的原始值
- toRef:可以用来为源响应式对象上的 property 新创建一个 ref。然后可以将 ref 传递出去,从而保持对其源 property 的响应式连接。(即把响应式对象的单个属性转换成ref对象)
- toRefs:将响应式对象转换为普通对象,其中结果对象的每个 property 都是指向原始对象相应 property 的ref。(即把响应式对象的每个属性都转换成ref对象)
- isRef:判断是否是Ref对象
- customRef:创建一个自定义的ref函数
- shallowRef:创建一个 ref,它跟踪自己的 .value 更改,但不会使其值成为响应式的。
- triggerRef:手动执行与 shallowRef 关联的任何副作用
Computed:使用 getter 函数,并为从 getter 返回的值返回一个不变的响应式 ref 对象。
watch:
watchEffect:在响应式地跟踪其依赖项时立即运行一个函数,并在更改依赖项时重新运行它。
ReactiveEffect,
ReactiveEffectOptions,
DebuggerEvent,
TrackOpTypes,
TriggerOpTypes,
Ref,
ComputedRef,
WritableComputedRef,
UnwrapRef,
ShallowUnwrapRef,
WritableComputedOptions,
ToRefs,
DeepReadonly
11.组合式API:
- setup:值类型为Function。在创建组件之前执行,返回值自动嵌入实例的属性中
- 生命周期钩子(只能在setup函数中使用): 只能在 setup() 期间同步使用
- onBeforeCreate,
onCreated,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onActivated,
onDeactivated,
onRenderTracked,
onRenderTriggered,
onErrorCaptured
- provide/inject :
- getCurrentInstance getCurrentInstance 只能在 setup 或生命周期钩子中调用
setup?: (
this: void,
props: Props &
UnionToIntersection<ExtractOptionProp<Mixin>> &
UnionToIntersection<ExtractOptionProp<Extends>>,
ctx: SetupContext<E>
) => Promise<RawBindings> | RawBindings | RenderFunction | void
name?: string
template?: string | object // can be a direct DOM node
// Note: we are intentionally using the signature-less `Function` type here
// since any type with signature will cause the whole inference to fail when
// the return expression contains reference to `this`.
// Luckily `render()` doesn't need any arguments nor does it care about return
// type.
render?: Function
components?: Record<string, Component>
directives?: Record<string, Directive>
inheritAttrs?: boolean
emits?: (E | EE[]) & ThisType<void>
// TODO infer public instance type based on exposed keys
expose?: string[]
serverPrefetch?(): Promise<any>
const {
// composition
mixins,
extends: extendsOptions,
// state
data: dataOptions,
computed: computedOptions,
methods,
watch: watchOptions,
provide: provideOptions,
inject: injectOptions,
// assets
components,
directives,
// lifecycle
beforeMount,
mounted,
beforeUpdate,
updated,
activated,
deactivated,
beforeDestroy,
beforeUnmount,
destroyed,
unmounted,
render,
renderTracked,
renderTriggered,
errorCaptured,
// public API
expose
} = options
相关推荐
- sharding-jdbc实现`分库分表`与`读写分离`
-
一、前言本文将基于以下环境整合...
- 三分钟了解mysql中主键、外键、非空、唯一、默认约束是什么
-
在数据库中,数据表是数据库中最重要、最基本的操作对象,是数据存储的基本单位。数据表被定义为列的集合,数据在表中是按照行和列的格式来存储的。每一行代表一条唯一的记录,每一列代表记录中的一个域。...
- MySQL8行级锁_mysql如何加行级锁
-
MySQL8行级锁版本:8.0.34基本概念...
- mysql使用小技巧_mysql使用入门
-
1、MySQL中有许多很实用的函数,好好利用它们可以省去很多时间:group_concat()将取到的值用逗号连接,可以这么用:selectgroup_concat(distinctid)fr...
- MySQL/MariaDB中如何支持全部的Unicode?
-
永远不要在MySQL中使用utf8,并且始终使用utf8mb4。utf8mb4介绍MySQL/MariaDB中,utf8字符集并不是对Unicode的真正实现,即不是真正的UTF-8编码,因...
- 聊聊 MySQL Server 可执行注释,你懂了吗?
-
前言MySQLServer当前支持如下3种注释风格:...
- MySQL系列-源码编译安装(v5.7.34)
-
一、系统环境要求...
- MySQL的锁就锁住我啦!与腾讯大佬的技术交谈,是我小看它了
-
对酒当歌,人生几何!朝朝暮暮,唯有己脱。苦苦寻觅找工作之间,殊不知今日之事乃我心之痛,难道是我不配拥有工作嘛。自面试后他所谓的等待都过去一段时日,可惜在下京东上的小金库都要见低啦。每每想到不由心中一...
- MySQL字符问题_mysql中字符串的位置
-
中文写入乱码问题:我输入的中文编码是urf8的,建的库是urf8的,但是插入mysql总是乱码,一堆"???????????????????????"我用的是ibatis,终于找到原因了,我是这么解决...
- 深圳尚学堂:mysql基本sql语句大全(三)
-
数据开发-经典1.按姓氏笔画排序:Select*FromTableNameOrderByCustomerNameCollateChinese_PRC_Stroke_ci_as//从少...
- MySQL进行行级锁的?一会next-key锁,一会间隙锁,一会记录锁?
-
大家好,是不是很多人都对MySQL加行级锁的规则搞的迷迷糊糊,一会是next-key锁,一会是间隙锁,一会又是记录锁。坦白说,确实还挺复杂的,但是好在我找点了点规律,也知道如何如何用命令分析加...
- 一文讲清怎么利用Python Django实现Excel数据表的导入导出功能
-
摘要:Python作为一门简单易学且功能强大的编程语言,广受程序员、数据分析师和AI工程师的青睐。本文系统讲解了如何使用Python的Django框架结合openpyxl库实现Excel...
- 用DataX实现两个MySQL实例间的数据同步
-
DataXDataX使用Java实现。如果可以实现数据库实例之间准实时的...
- MySQL数据库知识_mysql数据库基础知识
-
MySQL是一种关系型数据库管理系统;那废话不多说,直接上自己以前学习整理文档:查看数据库命令:(1).查看存储过程状态:showprocedurestatus;(2).显示系统变量:show...
- 如何为MySQL中的JSON字段设置索引
-
背景MySQL在2015年中发布的5.7.8版本中首次引入了JSON数据类型。自此,它成了一种逃离严格列定义的方式,可以存储各种形状和大小的JSON文档,例如审计日志、配置信息、第三方数据包、用户自定...
你 发表评论:
欢迎- 一周热门
-
-
MySQL中这14个小玩意,让人眼前一亮!
-
旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起
-
【VueTorrent】一款吊炸天的qBittorrent主题,人人都可用
-
面试官:使用int类型做加减操作,是线程安全吗
-
C++编程知识:ToString()字符串转换你用正确了吗?
-
【Spring Boot】WebSocket 的 6 种集成方式
-
PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL
-
pytorch中的 scatter_()函数使用和详解
-
与 Java 17 相比,Java 21 究竟有多快?
-
基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化
-
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)