vue3新特征汇总与源码分析

最新推荐文章于 2024-04-21 03:28:27 发布

心宽路阔走天下

最新推荐文章于 2024-04-21 03:28:27 发布

阅读量419

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_42471170/article/details/113994521

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

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

心宽路阔走天下

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3新特征汇总与源码分析

vue3新特征汇总与源码分析（备注：vue3使用typescript编写）何为应用？const app = Vue.createApp({})app就是一个应用。应用的配置和应用的API就是app应用的属性和方法。1.应用配置：performance：开启浏览器的性能监控。值为true|falseoptionMergeStrategies：option选项的合并策略globalProperties：扩展实例的属性和方法isCustomElement：判断哪些标签为自定义组件error
复制链接

扫一扫