Vue3+TS Day01 - 邂逅Vue3 debug源码

一、初识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、计数器实现-【原生代码】？

  
    
0
    +1
    -1

    
  

6、计数器实现-【Vue实现】？

    
哈哈哈哈啊/div>

    
    

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 实例化；

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 代码
• ⑥浏览器中进行断点调试代码

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