vue源码分析(二)——vue的入口发生了什么

文章目录

  • 前言
  • (1)vue 项目构建的时候,通过package.json文件看到构建入口
  • (2) 构建入口页面:导入同级模块config的getAllbuilds方法
  • (3) 通过传入参数中的builds对象使用map获取
  • (4) 通过builds对象过滤后拿到了引入vue的文件
  • (5) 通过第(4)步找到下一个导出vue的文件
  • (6) 通过第(5)步找到下一个导出vue的文件
  • (7) 通过第(6)步找到下一个导出vue的文件
  • (8) 通过第(7)步找到下一个导出vue的文件
  • (9) 最终发现Vue其实是个函数
  • 总结


前言

vue源码是基于rollup构建的,rollup是一个轻量级构建工具,非常适合js库的源码构建,因为它只编译js。


(1)vue 项目构建的时候,通过package.json文件看到构建入口

路径:vue\package.json

在这里插入图片描述

(2) 构建入口页面:导入同级模块config的getAllbuilds方法

路径:vue\scripts\build.js
在这里插入图片描述

(3) 通过传入参数中的builds对象使用map获取

builds中拿到所有的配置,然后通过命令行参数过滤掉不需要的配置,最后将入口配置返回到build.js中,并调用build方法进行构建。

路径:scripts\config.js

在这里插入图片描述

(4) 通过builds对象过滤后拿到了引入vue的文件

路径:vue\src\platforms\web\entry-runtime-with-compiler.ts

在这里插入图片描述

(5) 通过第(4)步找到下一个导出vue的文件

路径:vue\src\platforms\web\runtime-with-compiler.ts
注意点:这里挂载了$mounted方法

在这里插入图片描述

(6) 通过第(5)步找到下一个导出vue的文件

路径:vue\src\core\index.ts

在这里插入图片描述

(7) 通过第(6)步找到下一个导出vue的文件

路径:vue\src\core\index.ts

在这里插入图片描述

(8) 通过第(7)步找到下一个导出vue的文件

路径:vue\src\core\instance\index.ts

在这里插入图片描述

(9) 最终发现Vue其实是个函数

问题:为什么这里使用的es5的方法,而不是 es6 的 class ?
原因:如下图,第(8)步中的initMixin等方法(路径:vue\src\core\instance\init.ts)都是放到原型上的,将vue的原型拆分成多个文件,不同的逻辑按照代码的逻辑组织关系,有利于维护代码。

在这里插入图片描述

在这里插入图片描述

总结

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

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

相关文章

简化路径(C++解法)

题目 给你一个字符串 path ,表示指向某一文件或目录的 Unix 风格 绝对路径 (以 / 开头),请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中,一个点(.)表示当前目录本身&#xff1…

Git(二)版本控制、发展历史、初始化配置、别名

目录 一、版本控制1.1 为什么要使用版本控制?1.2 集中化的版本控制系统1.3 分布式的版本控制系统1.3 两种版本控制系统对比集中式(svn)分布式(git) 二、发展历史三、初始化配置3.1 配置文件3.2 配置内容 四、别名 官网…

论文阅读 - Hidden messages: mapping nations’ media campaigns

论文链接: https://link.springer.com/content/pdf/10.1007/s10588-023-09382-7.pdf 目录 1 Introduction 2 The influence model 2.1 The influence‑model library 3 Data 4 Methodology 4.1 Constructing observations 4.2 Learning the state‑transiti…

自动驾驶之—LaneAF学习相关总结

0.前言: 最近在学习自动驾驶方向的东西,简单整理一些学习笔记,学习过程中发现宝藏up 手写AI 1. 概述 Laneaf思想是把后处理放在模型里面。重点在于理解vaf, haf,就是横向聚类:中心点,纵向聚类&…

内网渗透——macOS上搭建Web服务器

# 公网访问macOS本地web服务器【内网穿透】 文章目录 1. 启动Apache服务器2. 公网访问本地web服务2.1 本地安装配置cpolar2.2 创建隧道2.3 测试访问公网地址3. 配置固定二级子域名3.1 保留一个二级子域名3.2 配置二级子域名4. 测试访问公网固定二级子域名 以macOS自带的Apache…

Android 发布 15 周年了!Google 员工说出了这些年的美好回忆

原文链接:https://blog.google/products/android/android-15th-anniversary-googler-highlights/ 作者:Sameer Samat, GM and VP of Android Ecosystem 翻译者:张拭心 https://shixin.blog.csdn.net/ 自从带有 Android Market(现在…

python自动化测试(四):ECShop后台:商品分类添加

前置条件: 本地部署:ECShop的版本是3.0.0、Google版本是 Google Chrome65.0.3325.162 (正式版本) (32 位) Google驱动的selenium版本是3.11.0 目录 前置代码 一、登录(后台登录) 二、进入商品分类页…

常用应用安装教程---在centos7系统上安装JDK8

在centos7系统上安装JDK8 1:进入oracle官网下载jdk8的tar.gz包: 2:将下载好的包上传到每个服务器上: 3:查看是否上传成功: [rootkafka01 ~]# ls anaconda-ks.cfg jdk-8u333-linux-x64.tar.gz4&#xf…

asp.net古代服饰系统VS开发sqlserver数据库web结构c#编程包含购物答题功能点

一、源码特点 asp.net 古代服饰系统 是一套完善的web设计管理系统(含购物 答题),系统采用mvc模式(BLLDALENTITY)系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境 为vs2010,数据库为sqlserver…

Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK

请求场景: 当前页面URL:http://127.0.0.1:8000/testcase 跳转请求页面URL:http://127.0.0.1:5000/testcase_orm 使用axios请求 时 页面提示跨域报错 跨域报错信息 > Access to XMLHttpRequest at http://127.0.0.1:5000/testcase_orm fr…

[SQL开发笔记]LIKE操作符:在 WHERE 子句中搜索列中的指定模式

一、功能描述: LIKE操作符:用于在 WHERE 子句中搜索列中的指定模式。 二、LIKE操作符语法详解: LIKE 语法 SELECT column1, column2,…FROM table_nameWHERE column LIKE pattern; 参数说明: (1)colum…

目前和未来的缓存构建

说起来可能有点反直觉,有时候不运行反而可以帮助我们加快速度,这正是网络浏览器运行的指导原则。不必在页面上加载所有内容,缓存的元素已经存在,不需要每次访问网站或网页时都重新加载。页面加载速度越快,浏览器的工作…

大数据Flink(一百零二):SQL 聚合函数(Aggregate Function)

文章目录 SQL 聚合函数(Aggregate Function) SQL 聚合函数(Aggregate Function) Python UDAF,即 Python AggregateFunction。Python UDAF 用来针对一组数据进行聚合运算,比如同一个 window 下的多条数据、或者同一个 key 下的多条数据等。针对同一组输入数据,Python A…

伦敦银现货白银走势如何应对

伦敦银是国际现货白银交易的别称,它每天的价格走势受到全球投资者广泛的关注,也是全球各个白银市场的价格指标。白银投资者要了解伦敦银走势的特点,才能更好地进行分析,实现自己的所预期的收益。 整体来说,伦敦银价格的…

Visual Studio远程连接Linux编译代码时,头文件在/usr/include中找不到,文件存在于/usr/include的子目录中

文章目录 1 问题的提出2 问题分析3 问题的解决 1 问题的提出 VS2022在编译数据安全传输平台时,远程连接到Centos上进行编译,但是提示找不到json头文件。 2 问题分析 在Linux系统下编译代码时,系统会主动到/usr/include目录主动搜索头文件。…

【Unity程序技巧】事件管理器

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:Uni…

Spring Boot集成Swagger接口分类与各元素排序问题

在上一篇中我们完成使用JSR-303校验,以及利用Swagger2得到相关接口文档,这节,我们在原先的基础之上,完成Swagger中关于对各个元素之间控制前后顺序的具体配置方法。 Swagger的接口的分组 首先我们需要对Swagger中的接口也就是以…

智能汽车安全:保护车辆远程控制和数据隐私

第一章:引言 智能汽车技术的快速发展为我们带来了许多便利,但也引发了一系列安全和隐私问题。本文将探讨智能汽车安全的重要性,以及如何保护车辆远程控制和数据隐私。 第二章:智能汽车远程控制 智能汽车的远程控制是一项令人兴…

全球生物气候产品2.5m和30s分辨率

简介 生物气候是指生物和气候相互作用的结果,包括植物和动物对气候的影响,以及气候对生物的影响。生物气候研究的是生物、气候、土地和水等自然要素之间相互作用的过程,旨在探讨它们是如何互动并导致生态系统的变化的。生物气候对于理解全球…

MySQL数据库基本操作1

文章目录 主要内容一.DDL1.创建表代码如下(示例): 2.创建表的类型3.其他操作4.修改表结构格式代码如下(示例): 二.DML1.数据插入代码如下(示例): 2.数据修改代码如下(示例): 3.数据删…