Vue3+TS Day01 - 邂逅Vue3 debug源码
2021-11-23 本文已影响0人
望穿秋水小作坊
一、初识Vue
1、Vue 的读音是什么？对于 Vue 的官方定位是什么？
- 读音：view。
- 官方定位：是一套基于构建用户界面的渐进式JavaScript框架。
2、什么是【渐进式】框架？
- 表示我们可以在项目中一点点来引入和使用 Vue，而不一定需要全部使用 Vue 来开发整个项目。
3、目前前端最流行的三大框架是什么？如何从数据对比它们的流行程度（主要是思路）？
- Vue、React、Angular
- 可以从 百度指数、谷歌指数 对比流行度
- 可以从 npm 安装量对比流行度
image.png
image.png
4、Vue3 对于 Vue2 的一些重要变化（了解即可）？
image.png
image.png
5、Vue3 + TS 的学习大纲？
image.png
6、Vue 的本质是什么？
- Vue 的本质，就是一个 JavaScript 的库
image.png
二、Vue 的基本使用
1、Vue 的引入方式？
image.png
2、什么是 CDN？（要解释清楚这个概念最佳角度----从【不使用】和【使用】CDN 这两个模式分析）
-CND：称之为内容分发网络（Content Distribution Network）
image.png
image.png
3、使用 【CND 的方式】引入 Vue，并体验下 vue 的基础用法？
image.png
4、直接拷贝 vue 的 JavaScript 文件，并且自己【手动引入】？
image.png
5、计数器实现-【原生代码】？
<body>
<h2 class="counter">0</h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>
<script>
// 1.获取所有的元素
const counterEl = document.querySelector(".counter");
const incrementEl = document.querySelector(".increment");
const decrementEl = document.querySelector(".decrement");
// 2.定义变量
let counter = 100;
counterEl.innerHTML = counter;
// 3.监听按钮的点击
incrementEl.addEventListener("click", () => {
counter += 1;
counterEl.innerHTML = counter;
});
decrementEl.addEventListener("click", () => {
counter -= 1;
counterEl.innerHTML = counter;
});
</script>
</body>
6、计数器实现-【Vue实现】？
<body>
<div id="app">哈哈哈哈啊/div>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
template: `<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>`,
data: function () {
return {
counter: 100
}
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
}).mount("#app");
</script>
</body>
7、对比【原生实现计数器】和【Vue 实现计数器】，理解什么是命令式编程？什么是声明式编程？（超级重点）
- 命令式编程关注的是“how to do”；
- 声明式编程关注的是“what to do”，由框架（机器）完成“how”的过程；
- 目前 Vue，React、Angular 的编程模式，我们称之为声明式编程；
image.png
8、从【MVC模型】【MVVM模型】的角度，Vue 更遵守哪个？谁是 【M】【V】【VM】？
- 通常情况下，我们经常称 Vue 是一个 MVVM 的框架。
- 【V】是 【view】
- 【M】是 【model】
- 【VM】是【Vue 框架】
image.png
三、Vue 在 createApp 时传入对象的【属性解析】
1、Vue 的 template 属性有什么用？是如何生效的？
- 【template 属性】：表示的是 Vue 需要帮助我们渲染的模板信息
- 【生效过程】：会用 【template内容】 替换掉 mount("app") 中 app 标签的 【innerHTML 内容】
image.png
2、Vue 提供了两种方式挂载 template，掌握【最常用】的那种即可？
- 使用任意标签（通常使用 template 标签，因为不会被浏览器渲染），设置 id
- template 元素是一种用于保护客户端内容的机制，该内容在加载页面时不会被呈现，但随后可以在运行时使用 JavaScript 实例化；
<body>
<div id="app">
</div>
<template id="why">
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</template>
<script src="../js/vue.js"></script>
<script>
document.querySelector("#why")
Vue.createApp({
template: '#why',
data: function() {
return {
message: "Hello World",
counter: 100
}
},
// 定义各种各样的方法
methods: {
increment() {
console.log("点击了+1");
this.counter++;
},
decrement() {
console.log("点击了-1");
this.counter--;
}
}
}).mount('#app');
</script>
</body>
3、data 属性需要传入什么？为什么修改 data 中的对象，会在 view 上自动相应？
- 在 Vue3.x 的时候，必须传入一个【返回一个对象的函数】，否则就会直接在浏览器中报错；
- data 中返回的对象会被【Vue 的响应式系统】劫持，之后对改对象的修改或访问都会在劫持中被处理；
- 所以我们在 template 中通过{{counter}}访问 counter，可以从对象中获取到数据；
- 所以我们修改 counter 值时，template 中的{{counter}}也会发生改变；
image.png
4、methods 属性需要传入什么？以及为什么不能使用箭头函数？
- methods 属性时一个对象，通常我们会在这个对象中定义很多方法；
- 这些方法可以被【绑定到 template 模板中】
- 在该方法中，我们可以使用 this 关键字来直接访问到 data 中返回的对象属性；
image.png
image.png
四、Vue3.x 源码
1、如何下载 Vue3.x 的源码，并且进行 debug？
- ①下载 3.0.11tag 的 Vue3 zip 包
- ②执行
git init、git add ./、git commit -m "12"等命令，构建 git 环境 - ③执行
yarn install安装依赖库 - ④执行
yarn dev生成dist目录下的 vue.global.js - ⑤在
/vue-next-3.0.11/packages/vue/examples/why目录下，编写带有断点的 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>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<div>
<div>aaaa</div>
<div>{{counter}}</div>
<hello :counter='counter'></hello>
<button @click="changeMessage">Counter++</button>
</div>
</template>
<template id="hello">
<div>{{counter}}</div>
</template>
<script src="../../dist/vue.global.js"></script>
<script>
debugger;
Vue.createApp({
template: '#my-app',
components: {
'Hello': {
template: "#hello",
props: {
counter: Number
}
}
},
data() {
return {
counter: 0
}
},
setup() {
const info = Vue.reactive({
name: "why"
})
return {
info
}
},
methods: {
changeMessage() {
this.counter++;
console.log(this.info);
}
}
}).mount('#app')
</script>
</body>
</html>
image.png
image.png
2、 在浏览器中发现，debug 的时候，代码断点全部在一个文件中，如何映射到源码文件中？
- 修改 package.json 文件
"scripts": {
"dev": "node scripts/dev.js --sourcemap",
- 重新
yarn dev
image.png
3、遗留问题【this 指针】后面有空再研究
- 猜测下面代码的打印结果
image.png
image.png
image.png
image.png
image.png
image.png
image.png
3、遗留问题【method 的 this 指针到底指向谁】后面有空再研究
image.png
