Vue3核心数Typescript类剖析

光阴:?2021-09-08阅览:?183价签:?Vue3

与使唤JavaScript各别的是,用Typescript写vue程序要要求了解vue的相关门类。Vue核心数的门类,大部写在@vue/runtime-core包中。

Component

Vue页面是由一个个组件血肉相联的。组件在Vue中的类是Component。承袭了ComponentOptions,FunctionalComponent和ComponentPublicInstanceconstructor。

其间,ComponentOptions承袭了ComponentOptionsBase。就是是咱俩时常写的宣传单式的隐含data,methods等属性同好会的选取组件:

FunctionalComponent是函数式组件,ComponentPublicInstanceconstructor是范例组织器(组织函数)。

ComponentOptions承袭了ComponentCustomOptions,本条av接口是甚么在Vue源码中是空的,咱俩可以借助它了自定义Vue组件选取中的属性同好会,比如说源码中的例子:

declare module '@vue/runtime-core' {
  interface ComponentCustomOptions {
    beforeRouteUpdate?(
      to: Route,
      from: Route,
      next: () => void
    ): void
  }
}

咱俩在定义组件时使唤的defineComponent函数用于协助咱俩展开组件选取的门类宣传单,它接受ComponentOptionsWithoutProps,ComponentOptionsWithArrayProps或ComponentOptionsWithObjectProps行为选取参数。它们都承袭了ComponentOptionsBase,但有了各别的宣传单props的abcc形式的成语。本条函数也可以接受setup函数。

defineComponent函数归来DefineComponent类爱人,它是ComponentOptionsBase和ComponentPublicInstanceConstructor的交集类爱人:

type DefineComponent = ComponentPublicInstanceConstructor & ComponentOptionsBase && 

CreateAppFunction

一个页面的起先通常是从createApp起始的。它的门类宣传单是这一来的:

export type CreateAppFunction<HostElement> = (
  rootComponent: Component,
  rootProps?: Data | null
) => App<HostElement>

它接受一个Component和属性同好会行为参数,归来一个App。

App

App范例是一个Vue的中上层爱人,通过它可以兴办同享属性同好会。兴办插件,兴办破译选取,兴办错误郑愁予处事函数等。

https://v3.cn.vuejs.org/api/application-api.html

通过mount方法可以将根组件挂载到文档中。并归来一个ComponentPublicInstance爱人。

ComponentPublicInstance

ComponentPublicInstance是组件范例,隐含$el,'emitprops等属性同好会。Vue以Component为模板,创建了ComponentPublicInstance`。

它的门类定义为:

type ComponentPublicInstance<
  P = {}, // props type extracted from props option
  B = {}, // raw bindings returned from setup()
  D = {}, // return from data()
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
  E extends EmitsOptions = {},
  PublicProps = P,
  Defaults = {},
  MakeDefaultsOptional extends boolean = false,
  Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>
> = {
  $: ComponentInternalInstance
  $data: D
  $props: MakeDefaultsOptional extends true
    ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
    : P & PublicProps
  $attrs: Data
  $refs: Data
  $slots: Slots
  $root: ComponentPublicInstance | null
  $parent: ComponentPublicInstance | null
  $emit: EmitFn<E>
  $el: any
  $options: Options & MergedComponentOptionsOverride
  $forceUpdate: () => void
  $nextTick: typeof nextTick
  $watch(
    source: string | Function,
    cb: Function,
    options?: WatchOptions
  ): WatchStopHandle
} & P &
  ShallowUnwrapRef<B> &
  UnwrapNestedRefs<D> &
  ExtractComputedReturns<C> &
  M &
  ComponentCustomProperties

其间$options就是咱俩在写组件时的ComponentOptionsBase类爱人(如果局部话,对此函数式组件则隐含一个renderer方法)和MergedComponentOptionsOverride(钩子函数函数)交集类。

P,ShallowUnwrapRef,UnwrapNestedRefs,ExtractComputedReturns,M协助咱俩可以用this[...]的方式窃取组件范例的数据属性同好会和方法。

ComponentCustomProperties在源码中是一个空av接口是甚么,咱俩可以通过它来自定义组件范例上的属性同好会。示例:

import { Router } from 'vue-router'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $router: Router
  }
}

$属性同好会是ComponentInternalInstance类爱人。示意组件的之中示例。隐含了一些为尖端使用供给的属性同好会,包括VNode。


所长推荐

1.云服务推荐: 境内主流云投资商。各项云产品网的问道。淘宝优惠券哪边兴办领取。先锋播放地址:阿里音乐云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10658

Vue.js 3.2 至于响应式部分的近义词的优化

Vue 3 标准揭晓距今已经快一年了,信赖过多伴侣已经在搞出环境卫生起作用了 Vue 3 了。今昔,Vue.js 3.2 已经标准揭晓,而这次 minor 本子的升级机要映现在源码层级管理制度的优化,对此租户的使唤断层来说实在变化并不大。

vue3初始化挂载组件业务流程管理

正文机要根据vue3源码去晓得清楚vue3的组件挂载业务流程管理(煞尾附业务流程管理图制作软件),根据个人工作总结阅览源码去训诂,vue的组件是哪边从.vue单文件夹哪边设置密码组件一步步扦插到真真DOM中,并映衬到页面上。

以 JSX 的方式来编写 Vue3 代码生成

创建 ASlotDemo 组件,ASlotDemo 有具名agp插槽 header,范围agp插槽 footer。在模板中定义agp插槽要求使用 <slot/>, jsx 中使唤renderSlot函数映衬agp插槽

vue3.0之ref函数

ref推荐定义基本数据门类(ref值也可以是爱人。但是一般变化下是爱人直白使唤reactive更说得过去)。在 Vue 的模板中使唤 ref 的值不要求通过 value 收获 (Vue 会通过全自动给 ref 的值添加 .value)。

Vue3 创业网好项目从零起始搭建创业网好项目及插件的使唤

vue3.0 出去有段光阴,借助年底这段光阴不怎忙。起始学习Vue3。正文机要从创业网好项目搭建到创业网好项目化学战,一步步的学习Vue3 的创业网好项目搭建以及一些插件及库的使唤,节减入坑。

vue3.0自定义死亡不掉落指令(directives)

自定义死亡不掉落指令可以领到出原生DOM操作的逻辑。所以死亡不掉落指令的使用范围机要行为在。当一些操作波及到 DOM 底层人民时,而且操作逻辑可能性用于多处地方棋牌官方下载,就适合用死亡不掉落指令来打包这些逻辑。

Vue3 的响应式和以前有甚么千差万别,Proxy 无敌?

Vue2 里的响应式实在稍事像是一个半完lol怎么全体说话,对此爱人上新增的属性同好会独木难支。对此数组则要求拦住它的原型方法来落实响应式。

200 行从零落实 vue3

emmm 用半天光阴捋顺了 vue3 的源码,再用半天光阴写了个 mini 版。我倍感我也是没谁了。vue3 的源码未来特定会烂马路的。咱俩越早的去复现它。就。emm可以越早的装逼hhh

Vue3比例Vue2有哪样变化

Vue3 使唤 Proxy 展开的响应式,Proxy 相比于 defineProperty 的均势,Object.defineProperty() 的这个美术社大有问题机要有三个:

vue3和vue2生命保险期的比例

使唤<keep-alive> 组件会将数据封存在内存中,比如说咱俩不想每次看到一个页面都另行加载数据,就可以使唤组件解决。vue3使唤生命保险期要求不过从vue中选定,并且唯其如此在setup函数内惯用

点击敬称...

本末以同享。研究为目的哪边读,不存在任何商业目的哪边读。其版权属原作者所有,如有侵权或违规,请与小编关系!变化毋庸讳言本人将予以删减!

Baidu