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 目录 前置代码 一、登录(后台登录) 二、进入商品分类页…

FFmpeg 从视频流中抽取图片

抽取单个图片 使用 FFmpeg 进行截图:在终端或命令提示符下,使用以下命令进行截图: ffmpeg -i input.mp4 -ss 00:00:05 -vframes 1 output.jpg其中, -i input.mp4:指定输入的 H.264 文件路径和名称。 -ss 00:00:05&a…

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

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

软考高级系统架构设计师系列之:案例分析典型试题四

软考高级系统架构设计师系列之:案例分析典型试题四 一、架构风格1.案例试题2.参考答案二、软件架构1.案例试题2.参考答案三、ESB1.案例试题2.参考答案四、SOA1.案例试题2.参考答案五、企业信息化1.案例试题2.参考答案一、架构风格 公司欲针对Linux操作系统开发一个KWIC(Key …

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…

目前和未来的缓存构建

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

A - Block Sequence

思路: (1)对于每一个位置,有三种选择,一是选择删除,二是选择当排头清洗,三是被前面的排头清洗; (2)注意到总是要求将最后一位数清洗完,即前面信…

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

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

【问题】在安装torchvision的时候,会自动安装torch?

1 背景👇🏻👇🏻👇🏻 在使用如下命令安装torchvision的时候,发现之前已安装的torch被卸载了。 pip install torchvision -i https://pypi.tuna.tsinghua.edu.cn/simple 2 分析🐰&a…

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

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

VMware CentOS 虚拟机扩容

参考文章: VMware中centos磁盘扩容 - 简书 看这篇文章进行操作!扩展根分区报错,xfs_growfs 提示 / is not a mounted XFS filesystem-CSDN博客 [rootnode001 ~]# df 文件系统 1K-块 已用 可用 已用% 挂载点 /dev/…

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

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