百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

vue3新特征和所有的属性,方法汇总及其对应源码分析

ztj100 2024-11-26 11:14 23 浏览 0 评论

vue3新特征汇总与源码分析

(备注:vue3使用typescript编写)

何为应用?

const app = Vue.createApp({})

app就是一个应用。

应用的配置和应用的API就是app应用的属性和方法。

1.应用配置:

  1. performance:开启浏览器的性能监控。值为true|false
  2. optionMergeStrategies:option选项的合并策略
  3. globalProperties:扩展实例的属性和方法
  4. isCustomElement:判断哪些标签为自定义组件
  5. errorHandler:错误时的处理函数
  6. 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:

  1. version:版本号
  2. config:应用的配置信息
  3. use:引入插件
  4. mixin:引入混合器
  5. component:引入组件
  6. directive:引入指令
  7. mount:挂载组件
  8. unmount:卸载组件
  9. 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:

  1. data:值类型为Function,
  2. props:值类型为object|array
  3. computed:值类型为{ [key: string]: Function | { get: Function, set: Function } }
  4. methods:值类型为{ [key: string]: Function }
  5. watch:值类型为{ [key: string]: string | Function | Object | Array}
  6. emits:类型为Array | Object


DOM:

  1. template:值类型为string
  2. render:值类型为Function

生命周期钩子:

beforeCreate,
created,
beforeMount,
mounted,
beforeUpdate,
updated,
beforeUnmount,
uonUnmounted,
activated,
deactivated,
renderTracked,
renderTriggered,
errorCaptured

资源:

  1. directives:值类型为Object
  2. 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>
    }

组合:

  1. mixins:值类型为Array
  2. extends:值类型为Object | Function
  3. provide:值类型为Object | () => Object
  4. inject:值类型为Array | { [key: string]: string | Symbol | Object }
  5. setup:值类型为Function

杂项:

  1. name:值类型为string。组件名称
  2. delimiters:
  3. inheritAttrs:值类型为boolean

5.实例属性(property):

  1. this.$data:
  2. this.$props:
  3. this.$el:
  4. this.$options:
  5. this.$root:
  6. this.$parent:
  7. this.$slots:
  8. this.$refs:
  9. this.$attrs:

6.实例方法:

  1. this.$watch():
  2. this.$emit():
  3. this.$forceUpdate():
  4. this.$nextTick():

7.指令:

  1. v-text:处理文本
  2. v-html:处理html
  3. v-show:显示与隐藏,dom已经渲染好
  4. v-if:满足条件才开始渲染,否则不渲染
  5. v-else:满足条件才开始渲染,否则不渲染
  6. v-else-if:满足条件才开始渲染,否则不渲染
  7. v-for:遍历列表
  8. v-on:绑定事件
  9. v-bind:绑定属性
  10. v-model:绑定表单的变量
  11. v-slot:绑定插槽具名,缩写:#
  12. v-one:标签只渲染一次
  13. v-is:绑定动态组件
  14. v-pre:
  15. v-cloak:

8.特殊指令:

  1. key:处理列表循环的key
  2. ref:处理标签的ref。类似于id
  3. is:处理动态组件,绑定组件的命名

9.内置组件:

  1. component:自定义组件,与:is一起使用
  2. transition:过度组件
  3. transition-groud:过度组件组
  4. keep-alive:缓存不活动的组件
  5. slot:插槽组件
  6. teleport:转移组件

10.响应式API:

import {reactive,readonly} from 'vue'

响应性基础api:

  1. reactive: 实现响应式对象,包括嵌套对象都是响应式对象,返回proxy代理对象
  2. readonly:实现对象只读,包括嵌套对象都为只读,返回proxy代理对象
  3. isProxy:判断是否是代理对象
  4. isReactive:判断是否是响应式对象
  5. isReadonly:判断是否是只读对象
  6. toRaw:入参为响应式对象,返回原始对象。
  7. markRaw:标志原始对象,不能再实现响应式对象。
  8. shallowReactive:浅相应式对象,只有第一层属性为响应式对象,嵌套对象不属于响应式对象。
  9. shallowReadonly:浅只读对象,只有第一层属性为只读对象,嵌套对象不属于只读对象,可以修改嵌套对象的属性。

Refs

  1. ref:接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value
  2. unref:返回对象的原始值
  3. toRef:可以用来为源响应式对象上的 property 新创建一个 ref。然后可以将 ref 传递出去,从而保持对其源 property 的响应式连接。(即把响应式对象的单个属性转换成ref对象)
  4. toRefs:将响应式对象转换为普通对象,其中结果对象的每个 property 都是指向原始对象相应 property 的ref。(即把响应式对象的每个属性都转换成ref对象)
  5. isRef:判断是否是Ref对象
  6. customRef:创建一个自定义的ref函数
  7. shallowRef:创建一个 ref,它跟踪自己的 .value 更改,但不会使其值成为响应式的。
  8. triggerRef:手动执行与 shallowRef 关联的任何副作用

Computed:使用 getter 函数,并为从 getter 返回的值返回一个不变的响应式 ref 对象。

watch:

watchEffect:在响应式地跟踪其依赖项时立即运行一个函数,并在更改依赖项时重新运行它。

ReactiveEffect,
ReactiveEffectOptions,
DebuggerEvent,
TrackOpTypes,
TriggerOpTypes,
Ref,
ComputedRef,
WritableComputedRef,
UnwrapRef,
ShallowUnwrapRef,
WritableComputedOptions,
ToRefs,
DeepReadonly

11.组合式API:

  1. setup:值类型为Function。在创建组件之前执行,返回值自动嵌入实例的属性中
  2. 生命周期钩子(只能在setup函数中使用): 只能在 setup() 期间同步使用
  • onBeforeCreate,
    onCreated,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
    onActivated,
    onDeactivated,
    onRenderTracked,
    onRenderTriggered,
    onErrorCaptured
  1. provide/inject :
  2. 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文档,例如审计日志、配置信息、第三方数据包、用户自定...

取消回复欢迎 发表评论: