@vue/composition-api原理解析

前言

上一篇文章介绍了@vue/composition-api是什么,以及为什么要用,现在来系统地解析一下 @vue/composition-api 的实现原理,希望可以加深对其工作机制的理解。

老规矩先分享下AI评价:对@vue/composition-api实现原理的介绍整体上非常详细和准确,展示了核心代码以及关键逻辑,这为理解其工作机制提供了很好的分析。

核心代码分析

install

引入@vue/composition-api时,需要手动通过Vue.use(),来调用该插件的install,所以我们看看安装时到底做了什么:


export function install(Vue: VueConstructor) {setVueConstructor(Vue)mixin(Vue)
}

这里最重要的其实是mixin函数,定义了在beforeCreate钩子中去执行初始化,
构建props和上下文ctx对象,执行setup函数:

export function mixin(Vue: VueConstructor) {Vue.mixin({beforeCreate: functionApiInit,mounted(this: ComponentInstance) {afterRender(this)},beforeUpdate() {updateVmAttrs(this as ComponentInstance)},updated(this: ComponentInstance) {afterRender(this)},})function functionApiInit(this: ComponentInstance) {const vm = thisconst $options = vm.$optionsconst { setup, render } = $optionsconst { data } = $options// wrapper the data option, so we can invoke setup before data get resolved$options.data = function wrappedData() {// 在data周期时,进行setup函数的执行initSetup(vm, vm.$props)return data || {}}}function initSetup(vm: ComponentInstance, props: Record<any, any> = {}) {const setup = vm.$options.setup!// 构造ctx对象,有以下key:// slots: 组件的插槽,默认为 {}// root: 组件的根实例// parent: 组件的父实例// refs: 组件的 ref 引用// listeners: 组件的事件监听器// isServer: 是否是服务端渲染// ssrContext: 服务端渲染的上下文// emit: 组件的自定义事件触发函数const ctx = createSetupContext(vm)const instance = toVue3ComponentInstance(vm)instance.setupContext = ctx// 通过Vue.observable对props进行响应式监听def(props, '__ob__', createObserver())}
}

ref

ref函数可以把一个普通的值转成响应式的数据。它返回一个可变的ref对象,对象上挂载了一个.value属性,我们可以通过这个.value属性读取或者修改ref的值。

其本质还是基于reactive来实现的响应式,只不过做了一个前置的get、set封装,源码如下:

export function ref(raw?: unknown) {// ref的本质其实还是调用的reactive// 然后通过 get/set 方法操作这个对象的值来实现对 ref 值的跟踪和响应const value = reactive({ [RefKey]: raw })return createRef({get: () => value[RefKey] as any,set: (v) => ((value[RefKey] as any) = v),})
}

createRef最后还是基于Object.defineProperty:

export function proxy(target: any,key: string,{ get, set }: { get?: Function; set?: Function }
) {Object.defineProperty(target, key, {enumerable: true,configurable: true,get: get || noopFn,set: set || noopFn,})
}

reactive

底层基于Vue.observable来建立响应式监听,Vue.observable 在 Vue2 和 Vue3 中的实现方式有所区别而已:

export function reactive<T extends object>(obj: T): UnwrapRef<T> {// 基于Vue.observableconst observed = observe(obj)setupAccessControl(observed)return observed as UnwrapRef<T>
}

computed

computed函数用来创建一个计算属性,它根据依赖进行缓存和懒执行。

构建get、set函数,通过vue的Watcher对象,进行监听绑定。

export function computed<T>(getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
): ComputedRef<T> | WritableComputedRef<T> {const vm = getCurrentScopeVM()let getter: ComputedGetter<T>let setter: ComputedSetter<T> | undefinedgetter = getterOrOptions.getsetter = getterOrOptions.setlet computedSetterlet computedGetterconst { Watcher, Dep } = getVueInternalClasses()let watcher: anycomputedGetter = () => {if (!watcher) {watcher = new Watcher(vm, getter, noopFn, { lazy: true })}if (watcher.dirty) {watcher.evaluate()}if (Dep.target) {watcher.depend()}return watcher.value}computedSetter = (v: T) => {if (setter) {setter(v)}}return createRef<T>({get: computedGetter,set: computedSetter,},!setter,true) as WritableComputedRef<T> | ComputedRef<T>
}

watch

watch函数用于侦听特定的数据源,并在回调函数中执行副作用。

底层是通过Vue.$watch来实现的:

// 底层是通过Vue.$watch来实现
function createVueWatcher(vm: ComponentInstance,getter: () => any,callback: (n: any, o: any) => any,options: {deep: booleansync: booleanimmediateInvokeCallback?: booleannoRun?: booleanbefore?: () => void}
): VueWatcher {const index = vm._watchers.length// @ts-ignore: use undocumented optionsvm.$watch(getter, callback, {immediate: options.immediateInvokeCallback,deep: options.deep,lazy: options.noRun,sync: options.sync,before: options.before,})return vm._watchers[index]
}

toRefs

toRefs 可以把一个 reactive 对象的属性都转成 ref 形式。

底层是一个个遍历key去调用toRef,然后基于createRef来保留响应式能力:

export function toRef<T extends object, K extends keyof T>(object: T,key: K
): Ref<T[K]> {if (!(key in object)) set(object, key, undefined)const v = object[key]if (isRef<T[K]>(v)) return vreturn createRef({get: () => object[key],set: (v) => (object[key] = v),})
}

生命周期

生命周期其实是一个临时覆盖:

// 利用 Vue 的选项合并策略(option merge strategies),
// 通过给组件实例的 $options 注入自定义的生命周期hook函数,来override原有的生命周期选项。// 生命周期hook函数需要通过 getCurrentInstance() 获取当前活跃的组件实例,
// 并在执行回调前通过 setCurrentInstance()绑定实例,在回调执行完毕后恢复之前的实例。export const onBeforeMount = createLifeCycle('beforeMount')
export const onMounted = createLifeCycle('mounted')
export const onBeforeUpdate = createLifeCycle('beforeUpdate')
export const onUpdated = createLifeCycle('updated')
export const onBeforeUnmount = createLifeCycle('beforeDestroy')
export const onUnmounted = createLifeCycle('destroyed')
export const onErrorCaptured = createLifeCycle('errorCaptured')
export const onActivated = createLifeCycle('activated')
export const onDeactivated = createLifeCycle('deactivated')
export const onServerPrefetch = createLifeCycle('serverPrefetch')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/19229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Three.js创建旋转的立方体

使用Three.js创建旋转的立方体 在本篇技术博客中&#xff0c;我们将介绍如何使用Three.js创建一个简单的场景&#xff0c;其中包含一个旋转的立方体。我们将学习如何设置场景、摄像机、立方体和渲染器&#xff0c;以及如何使用OrbitControls和gsap库来实现立方体的旋转动画和交…

VBA技术资料MF38:VBA_在Excel中隐藏公式

【分享成果&#xff0c;随喜正能量】佛祖也无能为力的四件事&#xff1a;第一&#xff0c;因果不可改&#xff0c;自因自果&#xff0c;别人是代替不了的&#xff1b;第二&#xff0c;智慧不可赐&#xff0c;任何人要开智慧&#xff0c;离不开自身的磨练&#xff1b;第三&#…

svn工具使用

svn 介绍 解决之道&#xff1a; SCM&#xff1a;软件配置管理 所谓的软件配置管理实际就是对软件源代码进行控制与管理 CVS&#xff1a;元老级产品 VSS&#xff1a;入门级产品 ClearCase&#xff1a;IBM 公司提供技术支持 SVN&#xff1a;主流产品 什么是SVN&#xff…

Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像(图生图,img2img)为例

Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像&#xff08;图生图&#xff0c;img2img&#xff09;为例 学习前言源码下载地址网络构建一、什么是Stable Diffusion&#xff08;SD&#xff09;二、Stable Diffusion的组成三、img2img生成流程1、输入图片编…

Kubernetes系列-Ingress

1 Ingress 概述 Kubernetes 对外暴露服务&#xff08;Service&#xff09;主要有两种方式&#xff1a;NodePort&#xff0c;LoadBalance&#xff0c;此外 externalIps 也可以使各类 service 对外提供服务&#xff0c;但是当集群服务很多的时候&#xff0c;NodePort方式最大的缺…

解决kettle-8.3请求https时要校验ssl证书问题的httpclient-4.5.3.jar

作用 解决kettle-8.3请求https时要校验ssl证书问题的httpclient-4.5.3.jar 使用说明 直接使用下面的包替换kettle/lib中的包即可。 https://gitee.com/joshho/some-file/blob/master/httpclient-4.5.3.jar httpclient源码地址 https://archive.apache.org/dist/httpcomponent…

什么是Java中的JNI(Java Native Interface)?

JNI&#xff08;Java Native Interface&#xff09;是Java中的一个特性&#xff0c;它允许Java代码调用本地&#xff08;C/C&#xff09;代码。对于一些需要使用底层系统功能的应用程序&#xff0c;比如图形库、音频库等&#xff0c;JNI可以提供一种方便的接口。 但是&#xf…

SpringBoot第28讲:SpringBoot集成MySQL - MyBatis-Plus方式

SpringBoot第28讲&#xff1a;SpringBoot集成MySQL - MyBatis-Plus方式 本文是SpringBoot第28讲&#xff0c;MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。MyB…

Spring框架——IOC配置文件方式

Spring框架的概述和入门 目录 Spring框架的概述和入门 什么是Spring框架 Spring框架的特点 Spring框架的IOC核心功能快速入门 Spring框架中的工厂&#xff08;了解&#xff09; Spring 创建Bean对象的三种方式 Spring框架的Bean管理的配置文件方式 Spring框架中标签的配…

conda环境下安装opencv-python包

conda环境下安装opencv-python包 一、#查看环境 conda info --env# conda environments: # base D:\ProgramData\Anaconda3二、激活base环境 进入conda环境 conda init cmd.exe conda activate base三、根据版本号&#xff0c;下载对应的 python-opencv…

英语学习—some vs any

1. 用法 some用于肯定句 I have some money. any用于否定句和一般疑问句 I dont have any money. Do you have any money? 2.特殊情况 &#xff08;1&#xff09;some—表示建议&#xff0c;反问&#xff0c;请求的疑问句中&#xff0c;或期望得到肯定回答的时候 Would…

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(16)-Fiddler如何充当第三者再识AutoResponder标签-上

1.简介 Fiddler充当第三者&#xff0c;主要是通过AutoResponder标签在客户端和服务端之间&#xff0c;Fiddler抓包&#xff0c;然后改包&#xff0c;最后发送。AutoResponder这个功能可以算的上是Fiddler最实用的功能&#xff0c;可以让我们修改服务器端返回的数据&#xff0c…

python面向对象

面向对象概述 python是一门面向对象语言&#xff0c;面向对象的三大特性&#xff0c;封装、继承、多态&#xff0c;python支持多继承&#xff0c;这里与java语言等还是有区别的 创建类关键字 class &#xff0c;类中包含属性和方法&#xff0c;通过类创建对象 python的类和对象…

【LangChain】向量存储之FAISS

LangChain学习文档 【LangChain】向量存储(Vector stores)【LangChain】向量存储之FAISS 概要 Facebook AI 相似性搜索&#xff08;Faiss&#xff09;是一个用于高效相似性搜索和密集向量聚类的库。它包含的算法可以搜索任意大小的向量集&#xff0c;甚至可能无法容纳在 RAM 中…

组合模式——树形结构的处理

1、简介 1.1、概述 树形结构在软件中随处可见&#xff0c;例如操作系统中的目录结构、应用软件中的菜单、办公系统中的公司组织结构等。如何运用面向对象的方式来处理这种树形结构是组合模式需要解决的问题。组合模式通过一种巧妙的设计方案使得用户可以一致性地处理整个树形…

小目标检测(1)——大恒(DaHeng)相机操作与控制编程

文章目录 引言正文相关开发库的介绍编程准备配置引用头文件GalaxyIncludes.h配置lib文件 具体编程过程初始化和反初始化枚举设备开关设备 属性控制属性控制器种类 图像采集控制和图像处理采单帧回调采集图像处理流对象属性控制 获取设备事件获取掉线事件通知 样例程序分析补充&…

转机来了,国内全新芯片技术取得突破,关键驱动引擎开始提速

芯片技术转机来了 我们都知道&#xff0c;芯片技术是现代信息技术的基石&#xff0c;它驱动着计算机、智能手机、物联网设备等各类电子设备的运行。 科技的不断进步&#xff0c;芯片技术也在不断演进。 从传统的集成电路到现代的微处理器和系统芯片&#xff0c;其计算能力和能…

预警 项目经验BUG

文章目录 定时任务 定时任务 在方法上使用Scheduled注解 cron参数&#xff1a; cron是一个表达式&#xff0c;最多接收7个参数从左到右分别表示&#xff1a;秒 分 时 天 月 周 年参数以空格隔开&#xff0c;其中年不是必须参数&#xff0c;可以省略。示例&#xff1a;Schedule…

dubbo配置---重试与版本号

1、重试次数 失败自动切换&#xff0c;当出现失败&#xff0c;重试其它服务器&#xff0c;但重试会带来更长延迟。可通过 retries“2”{默认} 来设置重试次数(不含第一次)。 &#xff08;1&#xff09;在调用端&#xff0c;Reference注解添加属性 retries&#xff0c;设置重试…

【React学习】React父子组件通讯

1. 父到子传值 在React框架中&#xff0c;父组件可以通过 props 将数据传递给子组件。子组件通过读取 props 来访问父组件传递过来的数据。 当父组件的 props 发生变化时&#xff0c;React 会自动重新渲染子组件以确保子组件中使用的数据保持同步。 父组件 import React, {…