美文网首页Vue3vueVue3.0+TS
Vue3+TS Day01 - 邂逅Vue3 debug源码

Vue3+TS Day01 - 邂逅Vue3 debug源码

作者: 望穿秋水小作坊 | 来源:发表于2021-11-23 16:21 被阅读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 initgit 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

    相关文章

      网友评论

        本文标题:Vue3+TS Day01 - 邂逅Vue3 debug源码

        本文链接:https://www.haomeiwen.com/subject/fpvbtrtx.html