从 vue 源码看问题 — vue 初始化都做了什么事?

前言

最近想要对 Vue2 源码进行学习,主要目的就是为了后面在学习 Vue3 源码时,可以有一个更好的对比和理解,所以这个系列暂时不会涉及到 Vue3 的内容,但是 Vue3 的核心模块和 Vue2 是一致的,只是在实现上改变了方式、进行了优化等。

准备工作

再开始阅读源码之前,有些事还是必须要做的,那就是拉取 源仓库代码 或者直接下载 ZIP 格式文件,处理好之后就需要打开神器 VScode
在这里插入图片描述

打开编辑器之后,你需要做的就是:

  • 安装依赖 install —— yarn 或者 npm

  • 找到 package.json 文件并找到里面的 scripts 部分,然后往 dev 命令中加入 --sourcemap 配置参数,或者新建建一个 dev:sourcemap 命令,其内容就是比 dev 命令多了个 --sourcemap 配置,其实主要就是为了生成 vue.js.map 文件方便后面调试
    在这里插入图片描述

  • 执行 npm run dev:sourcemap 命令,执行成功以后就会在 dist 目录下生成 vue.js.map 文件

    image.png

  • 然后就可以在 example 目录下,写一些自己想要测试的例子,然后通过 debug 的形式找到对应内容在代码中的位置

    image.png

深入源码

Vue 初始化的代码位置

既然要深入了解 Vue 初始化的内容,那么我们就得先找到 Vue 初始化是在哪里进行的,那么查找的方式有两种:

  • 通过 package.json 文件来进行查找 —— 在 script 脚本命令配置中有 "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",其中的 scripts/config.jsTARGET:web-full-dev 就为指明了文件里的具体配置,然后可以在逐层查找对应的入口文件
  • 通过 debug 模式进行查找 —— 首先在 example 目录下新建一个目录,可以是任何名字,本文讨论的是初始化的内容,这里就将其命名为 init,在 init 目录下新建一个 html 文件,在里面引入 dist 目录下的 vue.js, 因为生成的 map 文件是 vue.js.map,否则 debug 时不方便查找对应的文件位置
    在这里插入图片描述

这里选择方式二,毕竟方式一通过 rollup 配置查找还是过于繁琐,于是通过 debug 可以快速确定 Vue 进行初始化的文件位置.
在这里插入图片描述

this._init(options) 初始化

src>core>index.js 文件中,可以清晰的看到,在我们进行 new Vue() 时,调用的其实就是 this._init() 方法,而这个方法又是在 initMixin(Vue) 中进行定义的

在这里插入图片描述

initMixin(Vue) 方法

src>core>init.js 文件中,可以看到在 initMixin() 方法中最核心的就是处理组件配置项的部分,这一部分又分为 子组件根组件 的配置,又分别对应 initInternalComponent() 方法 和 mergeOptions()方法 + resolveConstructorOptions()方法.
在这里插入图片描述

同时,在 Vue.prototype._init 函数中还存在下面的这些方法的调用,后面会依次对每个方法进行解读:

在这里插入图片描述

子组件 —— initInternalComponent() 方法

这个方法做的事就是创建 $options 对象,然后对组件选项进行打平做性能优化,因为组件有很多的配置,其中也会存在各种嵌套的配置,在访问时免不了要通过原型链进行动态查找,会影响执行效率.

  • 根据 vm 的构造函数创建新的配置对象,即平时访问的 $options 对象
  • 把当前组件配置项打平然后赋值到 $options 对象,避免了原型链的动态查找
  • 如果当前组件配置项中存在 render 选项,就把它添加到 $options 对象上
    在这里插入图片描述

根组件 —— resolveConstructorOptions() 方法

src>core>init.js 文件中,resolveConstructorOptions() 方法其实最主要的事情就是从构造函数上解析配置对象,具体如下:

  • 如果构造函数的 super 属性存在,证明还有基类,此时需要递归进行对配置选项解析
  • 将构造函数的基类配置项进行缓存,然后比对当前配置项配置项进行对比,如果不一致,则表明基类的配置项已发生更改
  • 找出被更改的配置项和 extent 选项进行合并,并赋值给 $options
    在这里插入图片描述

根组件 —— mergeOptions() 方法

src>core>options.js 文件中,mergeOptions() 方法主要做的事情就是:

  • 对配置选项进行标准化
  • 对传入的原始配置对象进行合并
  • 返回新的配置对象
    根组件合并配置项,就是将全局配置项合并到根组件局部配置项中,比如将全局注册的 Vue.componet(options) 全局配置合并到根组件 new Vue(options) 上得到类似:
   new Vue({
     el: xxx,
     data: { xxx },
     componets:{
       localComponents,
       globalComponents,
     }
   })

在这里插入图片描述

initLifecycle() 方法

src>core>init.js 文件中调用 initLifecycle()方法,方法的具体定义位置为src>core>lifecycle.js.

可能很多人会误以为该方法是初始化生命周期钩子函数的(因为其方法名),其实这个方法主要是对组件关系属性进行初始化,比如:$root、$parent、$children、$refs 等.

在这里插入图片描述

initEvents() 方法

src>core>init.js 文件中调用 initEvents()方法,方法的具体定义位置为src>core>events.js.

主要作用就是初始化自定义事件,但是针对这个方法目前先有个简单的了解即可,因为里面涉及到的处理比较多,所以本文中暂时不对其进行展开,但是后面涉及到 this 实例上的方法时在具体分析.

问题:存在一个组件并且绑定了事件,如 <comp @myclick="clickHandle" />,那么我们可以在 com 组件中通过 this.$emit('myClick') 的方式去触发,那是谁监听了这个事件呢?

回答:也许你会认为是 comp 的父组件去监听的,但其实是 com 组件自己监听的,因为 @myclick="clickHandle" 会被编译为 this.$on('myClick', function clickHandle(){ })this.$emit('myClick') 的形式,而其中的 this 指向的就是 组件本身.

在这里插入图片描述

initRender() 方法

src>core>init.js 文件中调用 initRender()方法,方法的具体定义位置为src>core>render.js.

这里具体的内容也不再展开,后面涉及到 render 部分在进行深入解读,其实主要就做了三件事:

  • 初始化插槽,如:vm.$slots、vm.$scopedSlots
  • 定义 _c 方法,即 createElement 方法,也就是 h 函数
  • $attrs$listeners 属性进行响应式处理

在这里插入图片描述

callHook(vm: Component, hook: string) 方法

src>core>init.js 文件中有调用 callHook(vm, 'beforeCreate')callHook(vm, 'created'),这就是平时我们在组件配置项中定义的生命周期函数被调用的形式.

callHook 方法的具体定义位置为src>core>lifecycle.js 中.

在这里插入图片描述
在这里插入图片描述

initInjections() 方法

src>core>init.js 文件中调用 initInjections()方法,方法的具体定义位置为src>core>inject.js.

provide/inject 的相关介绍和使用方法,可以点此 vue 文档 查看.

initInjections() 方法

主要做的就是获取解析之后的 inject 选项 result,然后把 result 的每一项都代理到 vm 实例上,也可以理解为是进行响应式处理,在组件中实现 this.key 的形式直接进行访问

在这里插入图片描述

resolveInject() 方法

  • resolveInject(inject: any, vm: Component) 方法中的 inject 选项到这之前就已经进行了标准化处理,所以这里的 inject 选项的格式一定为:
     inject = {
       key: {
          from: xxx,
          default: xxx
        }
     }
    
  • 遍历 inject 配置的所有 key,查找到对应 provide 中的值
    • inject 配置中获取 from 属性值
    • 循环在祖代组件中查找 provide 选项,如果找到了,就获取对应的值,保存到 result 中;如果没有找到,就继续向上查找,一直到根组件
  • 如果到了根组件还是没有找到 inject 中的 key 在对应祖代组件上 provide 的值,那么就检查 inject 中是否设置了默认值,如果设置了默认值,就将其赋值为默认值

在这里插入图片描述

initState() 方法

src>core>init.js 文件中调用 initState()方法,方法的具体定义位置为src>core>state.js.

它是响应式原理的核心,主要处理 props、data、methods、watch、computed 等,
因为这一块属于响应式的内容,因此,不在本文里面进行深入探讨,后面针对响应式的内容会进行解读.

在这里插入图片描述

initProvide() 方法

src>core>init.js 文件中调用 initProvide()方法,方法的具体定义位置为src>core>inject.js.

这里面做的事情很简单:

  • $options 上获取 provide 选项
  • provide 选项存在时,判断它是不是函数,如果是函数就调用然后获取配置对象,如果不是函数就直接使用 provide 选项
  • vm 实例上挂载 _provide 属性,值就为上面的 provide 的具体内容

在这里插入图片描述

总结

上面根据 Vue.prototype._init 初始化函数中使用的每个方法进行了分析,在这里需要稍微总结一下,顺便配合一些问题进行理解。

合并组件配置

子组件

子组件进行合并配置项时,主要是通过打平配置项,减少原型链动态查找,达到性能优化的目的.

根组件

根组件合并配置,就是将全局配置项合并到根组件局部配置项中.

根组件合并会发生在三个地方:

  • 就是初始化时的这种情况
  • Vue.component(name, Comp) 时,将合并 Vue 内置全局组件用户注册的全局组件,最终都会合并到跟组件上配置上的 components 选项中
  • { components:{xxx} } 局部注册,执行编译器生成 render 函数时,
    会合并全局配置对象到组件局部配置对象上

组件关系属性的初始化

如需要初始化 $root、$parent、$children、$refs 等.

初始化自定义事件

问题:当在组件上使用自定义事件时,父组件和子组件谁负责监听这个事件?

 // 这是一个伪代码 
  <parentComp>
    <comp @myClick="clickHandle" />
  </parentComp>

其实 @myClick="clickHandle" 会被编译为 this.$emit('myClick')this.$on('myClick', function clickHandle(){}) 的形式,而这个 this 就是组件实例,即谁需要触发事件,谁就需要监听事件.

初始化插槽 & 定义 _c 方法

  • 初始化插槽,如:vm.$slots、vm.$scopedSlots
  • 定义 _c 方法,即 createElement 方法,也就是 h 函数

通过 callHook 执行 beforeCreate 和 created 生命周期函数

问题:beforeCreate 中能获取能访问什么内容,data 可以访问吗?

从源码中很容易看出来,在 beforeCreate 之前只初始化了 组件关系属性自定义事件插槽_c 方法,所以关于可以访问的就是这些内容.

因为 data、props、methods 等都没有进行初始化,所以就都不能进行访问,当然如果你在 beforeCreate 中通过异步的方式访问,比如 setTimeout 其实是可以的,最早能访问数据的地方其实就是 created 当中了.

在这里插入图片描述

初始化 inject 选项

  • 根据 inject 选项从祖代组件配置项中找到对应的 provide 选项,从而获取对应 key 中的值,得到 result[key] = val 形式的结果
  • 如果找到根组件上还不存在,就判断是否有 default 选项,有就设置默认值
  • 把得到的 result 结果进行响应式处理,代理的 vm 实例上

初始化 state 数据

响应式原理的核心,主要处理 props、data、methods、watch、computed

处理 provide 选项

vm.$options 配置对象上获取 provide 选项,provide 选项存在时,判断 provide 是不是函数,是函数就调用获取返回配置项,否则就直接使用 provide 选项

$mount 挂载

根据 $options 中是否存在 el 选项,决定是否自动调用 $mount 方法进入挂载阶段,没有则需要用户手动调用 $mount 进行挂载.

结合生命周期回答组件渲染流程

以下是 beforeCreatecreated 生命周期前后需要处理的详细内容:

  • 合并组件选项,将组件配置项打平,存放到 vm.$options 选项上,减少原型链的查找
  • 对组件关系属性进行初始化,比如:$root、$parent、$children、$refs
  • 初始化自定义事件,比如:@myclick="clickHandle" 会被编译为this.$on('myClick', function clickHandle(){})this.$emit('myClick') 的形式
  • 初始化插槽vm.$slots、vm.$scopedSlots)、定义_c方法,即createElementh函数)、对$attrs$listeners属性进行响应式处理
  • 执行 beforeCreate 生命周期函数
  • 初始化 inject 选项,根据inject选项从祖代组件配置项中找到对应的provide选项,从而获取对应key中的值,得到result[key] = val形式的结果
  • 初始化 state 数据,如:props、data、methods、watch、computed
  • 处理 provide 选项,判断 provide是不是函数,是函数就调用获取返回配置项,否则就直接使用provide选项
  • 执行 created 生命周期函数
  • 其他部分可以直接按照图示回答
    在这里插入图片描述

最后

看源码的过程中,一定要学会放弃某些内容解读,找准本次你要了解和学习的主线内容,否则就容易在阅读源码时产生各种支线问题,从而阻塞了主线的内容,对应的模块在学习对应内容时深入解读就好,不要一次性解读所有的内容。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何在BSV区块链上实现可验证AI

​​发表时间&#xff1a;2024年10月2日 nChain的顶尖专家们已经找到并成功测试了一种方法&#xff1a;通过区块链技术来验证AI&#xff08;人工智能&#xff09;系统的输出结果。这种方法可以确保AI模型既按照规范运行&#xff0c;避免严重错误&#xff0c;遵守诸如公平、透明…

MATLAB——矩阵操作

内容源于b站清风数学建模 数学建模清风老师《MATLAB教程新手入门篇》https://www.bilibili.com/video/BV1dN4y1Q7Kt/ 目录 1.MATLAB中的向量 1.1向量创建方法 1.2向量元素的引用 1.3向量元素修改和删除 2.MATLAB矩阵操作 2.1矩阵创建方法 2.2矩阵元素的引用 2.3矩阵…

SQL基础—2

1.左外连接查询&#xff08;left join on&#xff09; A - A∩B 左外连接查询两张表条件都满足的数据&#xff0c;以及左边表(A表)存在的数据(以左边表为主查询表)。 A - A∩B (A和A交B)。 示例&#xff1a;使用左外连接将dept表作为主查询表&#xff0c;查询员工编号、员工姓…

【Java并发】乐观锁、悲观锁、CAS、版本号机制

前言 在现代计算机系统中&#xff0c;处理并发操作时&#xff0c;锁机制是至关重要的。本文将介绍乐观锁、悲观锁以及CAS&#xff08;Compare and Swap&#xff09;这三种常见的并发控制技术&#xff0c;帮助理解它们的原理和应用场景。 1.悲观锁 1.1 定义 悲观锁是一种在访…

【优选算法】——二分查找!

目录 1、二分查找 2、在排序数组中查找元素的第一个和最后一个位置 3、搜索插入位置 4、x的平方根 5、山脉数组的封顶索引 6、寻找峰值 7、寻找旋转排序数组中的最小值 8、点名 9、完结散花 1、二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组…

Fooocus图像生成软件本地部署教程:在Windows上快速上手AI创作

文章目录 前言1. 本地部署Fooocus图像生成软件1.1 安装方式1.2 功能介绍 2. 公网远程访问Fooocus3. 固定Fooocus公网地址 前言 本篇文章将介绍如何在本地Windows11电脑部署开源AI生图软件Fooocus&#xff0c;并结合Cpolar内网穿透工具轻松实现公网环境远程访问与使用。 Foooc…

elasticSearch 7.12.1 Docker 安装ik分词

一、下载 https://github.com/infinilabs/analysis-ik/releases/tag/v7.12.1 将文件解压&#xff0c;复制到docker挂载的目录 docker ps#重启docker docker restart f7ec58e91f1f 测试 GET _analyze?pretty {"analyzer": "ik_max_word","text&qu…

智慧汇聚:十款企业培训工具打造学习型企业

在当今快速变化的商业环境中&#xff0c;企业要想保持竞争力&#xff0c;就必须不断适应新技术、新市场和新的工作方式。构建一个学习型企业&#xff0c;不仅能够促进员工的个人成长&#xff0c;还能增强团队的整体能力和企业的创新能力。为了实现这一目标&#xff0c;借助先进…

【Searxng】Searxng docker 安装

SearXNG将用户的查询请求分发至多个支持的搜索引擎&#xff0c;并收集返回的结果进行汇总处理。在这个过程中&#xff0c;它通过内置的过滤器功能屏蔽广告和其他不相关内容&#xff0c;确保搜索结果的纯净度。 一键部署 docker run \--name searxng \-p ????:8080 \-v ~/s…

FastAPI 请求体解析:基础概念与综合应用

FastAPI 请求体解析&#xff1a;基础概念与综合应用 本文深入探讨了 FastAPI 中的请求体概念&#xff0c;强调使用 Pydantic 模型来声明请求体数据结构。通过具体示例&#xff0c;展示了如何定义请求体、可选参数及默认值&#xff0c;提升数据验证和类型提示的便利性。文章还说…

Linux下的Debugfs

debugfs 1. 简介 类似sysfs、procfs&#xff0c;debugfs 也是一种内存文件系统。不过不同于sysfs一个kobject对应一个文件&#xff0c;procfs和进程相关的特性&#xff0c;debugfs的灵活度很大&#xff0c;可以根据需求对指定的变量进行导出并提供读写接口。debugfs又是一个Li…

【论文速读】Optimization-based Prompt Injection Attack to LLM-as-a-Judge

基于优化的提示词注入攻击 摘要引言问题描述LLM-as-a-judge威胁模型攻击者知道什么 JUDGEDECEIVER 细节概述生成影子候选回复公式化为优化问题Target-aligned generation lossTarget-enhancement lossAdversarial perplexity loss优化问题 求解优化问题 摘要 LLM-as-a-Judge 利…

单智能体carla强化学习实战工程介绍

有三个工程&#xff1a; Ray_Carla: 因为有的论文用多进程训练强化学习&#xff0c;包括ray分布式框架等&#xff0c;这里直接放了一个ray框架的示例代码&#xff0c;是用sac搭建的&#xff0c;obs没用图像&#xff0c;是数值状态向量值&#xff08;速度那些&#xff09;。 …

PD取电快充协议芯片,XSP08Q在灯具中的应用

前言 随着快充技术不断的发展 USB Type-C端口的普及 PD快充成了电子设备中的宠儿&#xff0c;在各种电子设备领域都能见到PD快充的身影&#xff0c;不得不说快充技术的出现让电子设备在充电的速度上得到前所未有的体验&#xff0c;大大的缩短了设备的充电时间。快充协议芯片不…

【AI开源项目】Botpress - 开源智能聊天机器人平台及其部署方案

文章目录 Botpress 概述Botpress 的定位 Botpress 的主要特点1. OpenAI 集成2. 易于使用3. 定制和扩展性4. 多平台支持5. 集成和扩展 API6. 活跃的社区和详尽的文档 部署方案集成集成开发集成部署机器人示例开发工具代理本地开发先决条件从源代码构建 Botpress 如何解决常见问题…

【天线&运输】交通事故严重程度检测系统源码&数据集全套:改进yolo11-HSFPN

改进yolo11-ASF-DySample等200全套创新点大全&#xff1a;交通事故严重程度检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.01 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系…

使用 Elastic、OpenLLMetry 和 OpenTelemetry 跟踪 LangChain 应用程序

作者&#xff1a;来自 Elastic Bahubali Shetti Langchain 应用程序的使用正在增长。构建基于 RAG 的应用程序、简单的 AI 助手等的能力正在成为常态。观察这些应用程序更加困难。考虑到现有的各种选项&#xff0c;本博客展示了如何将 OpenTelemetry 检测与 OpenLLMetry 结合使…

揭秘Scam-as-a-Service:警惕钓鱼攻击的产业化

2024年6月开始&#xff0c;CertiK安全团队监控到大量相似的phishing/drainer transaction&#xff0c;仅6月份监控到的涉案金额就超过5500万美元&#xff0c;进入8、9月份后&#xff0c;相关钓鱼地址的活动更加频繁&#xff0c;钓鱼攻击有愈演愈烈的架势。整个2024年第三季度&a…

前端Election

一.什么是Election 1.一款应用广泛的跨平台和桌面应用开发框架。 2.本质 Election的本质是结合了Chromium与Node.js 3.构建 使用HTML ,CSS,JS等Web技术构建桌面应用程序。 只要最后能转换成html css js即可 二.流程模型 1.主进程 关于node.js的任何api都在这里调用 一个纯…

如何在Linux系统中使用SSH进行安全连接

如何在Linux系统中使用SSH进行安全连接 SSH简介 安装SSH 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 启动SSH服务 验证SSH是否安装成功 SSH配置 配置监听端口 配置登录方式 SSH客户端 安装SSH客户端 使用SSH客户端 SSH密钥认证 生成SSH密钥对 复制公钥到远程服务器…