快速调试Vue3源码
参考官方文档cn.vuejs.org/guide/quick…
1 打开链接,会自动跳转Vue3最新源码
2 Crtl+A全选后复制 到本地工程文件中
第一步 下载创建本地Vue.js
第二步 下载创建本地VueEsm.js
3 新建html项目 将以下代码复制即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./Vue.js"></script>
<script type="importmap">
{
"imports": {
"vue": "./VueEsm.js"
}
}
</script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h1>{{obj.name}}</h1>
</div>
</body>
<script type="module">
import { reactive, createApp } from "vue";
createApp({
data() {
return {
message: "Hello Vue!",
};
},
setup() {
const obj = reactive({ name: "张三", id: 1 });
console.log(obj.id);
return { obj };
},
}).mount("#app");
</script>
</html>
效果如图
如何调试源码
第一步 进入源码加上断点 debugger
第二步 打开调试的html页面 打开控制台 刷新即可
