vue3
框架的使用极大提高了项目开发效率,我们不断的使用着耳熟能详的vue api
去完成业务功能,却往往忽略其背后复杂而又精妙的实现原理。本文就将以debugger
的方式对vue3
源码进行调试,以便清晰理解vue
的底层实现原理。
1、vue3
源码调试方式
(1)准备工作
下载vue
源码https://github.com/vuejs/core/tree/v3.5.18
; 然后通过npm install
的方式安装所需的依赖node_modules
(如果执行过程有报错,可以借助大模型协助解决); 接着使用npm run build
的方式打包生成packages/vue/dist/vue.global.js
;
(2)进行调试
在dist
当前同级目录下使用index.html
进行调试:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const App = {
template: `<div>Hello World</div>`,
};
debugger;
const app = Vue.createApp(App);
app.mount("#app");
</script>
</body>
</html>
通过vscode
的Open with Live Serve
的方式启动index.html
文件,开始debugger
断点调试。
2、脚手架
通过vue create app
的方式创建一个空白项目:
(1)准备工作
通过vue create app
创建的项目,只需要在vue.config.js
修改vue
的指向vue/dist/vue.esm-bundler.js
:
js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
resolve: {
alias: {
// 修改vue的源码指向
vue$: "vue/dist/vue.esm-bundler.js",
},
},
},
});
(2)进行调试
在main.js
文件中修改为:
js
import { createApp } from "vue";
const App = {
template: `<div>Hello World</div>`,
};
debugger;
let vm = createApp(App).mount("#app");
通过npm run serve
的方式启动vue
脚手架,开始debugger
断点调试。
现在可以愉快的进行底层原理探索了。