vue3初体验

 一、邂逅vue3和vue3开发体验

      1、课程内容：基础——源码——实战

      2、国外：react 用的更多

            国内：vue 用的更多

      3、什么语言更容易找工作？

        后端：优先java,其次是go,再次是node,c++

        前端：优先 js（ts）,其次flutter,再次android,ios

        其他：游戏开发，人工智能，算法工程师

        前端要求：vue,小程序

      4、vue3是兼容vue2的，直接学习vue3就可以

      5、2020年9月19号vue3发布

      6、vue3的变化:

        1)、源码通过monorepo的形式来管理代码：

            mono；单个

            repo: repository 仓库

            主要是将许多项目的代码存储在同一个repository中

            这样做的目的是多个包本身相互独立，可以拥有自己的功能逻辑，

            单元测试等，同时又在同一个仓库下方便管理，

            这样模块化分的更加清晰，可维护性，可扩展性更强

        2)、源码使用 ts 来进行重写：

            在vue2时，vue使用flow来进行类型检测

            在vue3时，vue的源码全部都使用ts来进行重构，

        3)、使用proxy 进行数据劫持：

            在vue2时，使用Object.defineProperty劫持数据的getter和setter方法

            缺陷：当给对象添加或者删除属性时，是无法劫持和监听的

            所以在vue2中，不得不提供一些特殊的api,

            eg：$set 或 $delete,事实上都是一些hack方法，也增加了开发者学习新的api的成本

            在vue3时，使用proxy来实现数据的劫持

        4)、删除了一些不必要的API:

            移除实例上的$on, $off, $once

            移除了一些特性： filter 、 内联模板等

        5)、编译方面的优化：

            生成Block Tree、 Slot 编译优化， diff算法优化

        6)、由Options API 到 Composition API：

            在vue2 ，使用 Options API 描述组件对象

            Options API 包括：data，props,methods, computed，生命周期等

            存在的问题：多个逻辑可能是在不同的地方：

            eg: created 中会使用某个一method来修改data的数据，代码的内聚性非常差

            Composition API可以将相关的代码 放到同一处 进行处理，而不需要在多个Options之间寻找

        7)、Hooks 函数增加代码的复用性：

            在vue2中，通过 mixins 在多个组件之间共享逻辑

            缺陷：mixins 也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题

            在vue3中，可以通过Hooks函数，将一部分独立的逻辑抽取出去，并且它们还可以做到响应式的

7、如何使用？

           方式一：cdn 引入

cdn的理解：

 

  <div id = "app">div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
  <script>
    const why = {
      template:"
helloworld
"
    }
 
    const app = Vue.createApp(why);
    app.mount("#app");
  script>

           方式二：下载vue的js文件 ，并手动引入

  <div id = "app">div>
  <script src="./js/vue.js">script>
  <script>
 
    Vue.createApp({
      template:"
你好呀嘻嘻
"
    }).mount("#app");;
    
  script>

           方式三: npm

           方式四：vue-cli 创建项目使用

       

8、什么是CDN?

          CDN 内容分发网络，

          指通过互相连接的网络系统，利用最靠近每个用户的服务器。

          更快，更可靠地将 音乐，图片，视频，应用程序及其他文件发送给用户

          来提供高性能，可扩展性及低成本的网络内容传递给用户

9、计数器案例  原生 js 实现和 vue 实现

     原生js实现

  <h2 class = "counter">0h2>
  <button class = "increatement">+1button>
  <button class = "decreatement">-1button>
  <script src="./js/vue.js">script>
  <script>
 
    // 获取元素
    let counterEl = document.querySelector(".counter")
    let increatementEl = document.querySelector(".increatement")
    let decreatementEl = document.querySelector(".decreatement")
    // 定义变量
    let counter = 0;
    counterEl.innerHTML = counter;
    // 绑定事件
    increatementEl.addEventListener("click",function(){
      counter ++;
      counterEl.innerHTML = counter;
    })
    decreatementEl.addEventListener("click",function(){
      counter --;
      counterEl.innerHTML = counter;
    })
    
  script>

vue实现

  <div id="app">div>
  <script src="./js/vue.js">script>
  <script>
    Vue.createApp({
      template:`
        
{{counter}}
        +1
        -1
      `,
      data:function(){
        return {
          counter:0
        }
      },
      methods: {
        increatement(){
          this.counter++;
        },
        decreatement(){
          this.counter--;
        }
      }
    }).mount("#app")
   
  script>

10、声明式编程，命令式编程

      不同维度的划分方式：

      编程范式：

      命令式编程 （jq)：关注点 how to do

      声明式编程（vue,react)：关注点 what to do,由框架（机器）完成how的过程

      编程范式：

      函数式编程

      面向对象编程

11、软件体系结构

      MVC  原生

      MVVM  vue

12、template

      vue需要帮助我们渲染的模板信息

      template里面有很多html标签，这些标签会替换掉我们挂载的元素的innerHTML

      这种模板过于别扭，IED很有可能没有任何提示

      vue提供了两种方式：

      方式一：使用script标签，类型为x-temmplate；

      方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置 id

template 不是vue特有的，是html本身就有定义过的。

默认里面的东西不会被浏览器渲染，就是用来被js代码读取的

13、data属性

      data属性是传入一个函数，并且该函数需要返回一个对象【vue3 ，data必须传入一个函数，否则报错】

      data中的对象会被Vue响应式系统劫持，之后对该对象的修改和访问都会在劫持中被处理

14、methods

        声明的方法可以直接通过组件实例访问，或者在模板语法表达式中使用。所有的方法都会将它们的 this 上下文自动绑定为组件实例，即使在传递时也如此。

      在方法中可以使用this关键字来直接访问data中返回的对象属性

        思考题：

      问：为什么不能使用箭头函数来定义method 函数（官方文档有给出解释）？

      答：在声明方法时避免使用箭头函数，因为它们不能通过 this 访问组件实例。

      问：在不使用箭头函数的情况下，this指向什么？【面试题】

      答：proxy

15、vue 源码

      如何查看源码，git 搜索vue-next(vue3) 选择tag稳定版本，git clone

      yarn dev