Vue3源码设计解析

本篇文章主要是学习如何阅读和调试Vue3源码,作为五年前端练习生我只会用,真的好奇它到底是如何实现的,而且学习源码带给我们好处不止这些,不仅面试必考,在工作中还能提高我们代码质量,真的是一件非常值得做的事啊!

下载vue的源代码(版本:v 3.2.37)

首先大家点击这里可以打开vue3源代码的github仓库; 想要下载Vue源码有常用的三种方式:

1.直接点击code => Download ZIP进行下载,这样下载的代码不包含git提交记录;

2.复制HTTPS或SSH的url,通过clone命令下载;

php 复制代码
//HTTPS
git clone https://github.com/vuejs/core.git
scss 复制代码
//SSH
git clone git@github.com:vuejs/core.git

3.点击fork按钮,fork当前项目到你的仓库下,再在你的仓库中执行以上两种方式下载,就可以根据当前版本生成自己的代码仓库;

本篇文章分析的是v 3.2.37版本源码,所以建议大家也下载此版本; 可以用这个命令:

bash 复制代码
git clone -b v3.2.37 --depth=1 https://github.com/vuejs/core.git

-b 后面写上指定版本标签,比如是v3.2.37--depth 表示深度克隆,1表示只克隆最新的版本;

分析源码的代码结构

完成了源码克隆,我们就可以来分析源码结构了,用VScode工具打开克隆下来的文件夹;

让我们重点看下package文件夹下的目录,标注不用关注的文件不是很重要可以先忽略;

运行源代码及测试实例

当我们下载好了源代码,接下来我们看一下,如何在Vue代码中运行测试实例,并进行debugger;

运行源代码

Vue是采用pnpm作为包管理工具的,首先全局安装pnpm:

css 复制代码
npm i -g pnpm

安装好了可以用pnpm -v命令查看当前的版本;pnpm安装完成可以执行pnpm i安装依赖;

css 复制代码
pnpm i

然后执行build命令完成打包操作;

arduino 复制代码
npm run build

打包完成会在packages/vue/目录下生成一个dist文件夹;

运行测试实例

Vue的实例都放在packages/vue/examples路径下的文件夹内; 接着在packages/vue/examples/vue-mini/reactivity目录下新建一个reactivity.html文件,在此文件中编写相关的测试代码;

xml 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../../dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    const { reactive, effect } = Vue

    const obj = reactive({
      name: '樱桃小丸子'
    })

    effect(() => {
      // 当前的div的内容会变成樱桃小丸子
      document.querySelector('#app').innerText = obj.name
    })
    // 7秒钟之后obj的setter把name改成哆啦A梦
    setTimeout(() => {
      obj.name = '哆啦A梦'
    }, 7000)
  </script>
</html>

通过script标签导入刚才打包好的dist路径下的global.js,并创建一个div id="app";

接着我们需要启动一个服务来运行当前的html;

推荐给大家一个vscode插件,叫Live Server,使用它可以启动服务更加方便;

安装完成之后,点击右键选择下图红框中的选项; 此时,我们成功启动一个服务来运行当前的html文件;

这时说明我们的测试实例运行成功了✿✿ヽ(°▽°)ノ✿

相关推荐
qq_364371723 分钟前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
你挚爱的强哥5 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
susu10830189116 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
天天进步20158 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
疯狂的沙粒9 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员9 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
想自律的露西西★10 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳10 小时前
vue3:瀑布流
前端·javascript·vue.js
程序媛-徐师姐12 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
余道各努力,千里自同风12 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js