Vue3的基础概念

一、创建vue3的项目(基于脚手架)

// 前提:将vue-cli 升级到4.x 的版本
vue create my-app-ts
// 使用ts
npm install typescript ts-node -g

生成时操作如下:
请添加图片描述

二、vue3.0 部分写法改变

后面补充

  • createStore => useStore
  • createRouter => useRouter
  • vue所有api 的入口:setup
  • vue3里面没有mapState
    原因:mapState 是放在this上面的,this的属性都不能做类型推断;所以改成了函数式api, 海恩那个做tree-shaking ;通过computed这个函数可以动态获取
  • vue2 是option API; vue3是composition API
  • vue3 v-model 不再是 value + @input;而是modelValue + onUpdate:modelValue, 并且可以同时使用多个v-model, 如:
// 没有参数(直接使用v-model),解析成 modelValue + onUpdate:modelValue
<div v-model:a="text1" v-model:b="text2"> </div>

解析成:
a + onUpdate:ab + onUpdate:b

// 带有参数,解析成 参数名 + onUpdate:参数名
<div v-model:a="text1" v-model:b="text2"> </div>

解析成:
a + onUpdate:ab + onUpdate:b
注意:v-model绑定值的简写 :value 需要改成 :modelValue

  • vue3 通过ref、reactive、toRefs 方法来创建响应式数据
    • ref 的作用就是将一个原始数据类型转换成一个响应式数据
    • reactive 的作用就是将一个对象转换成一个响应式对象
    • oRefs 的作用是将一个响应式对象转化为一个普通对象,把其中每一个属性转化为响应式数据
<template>
  <h1>{{ title }}</h1>                 // 直接使用 title
  <h2>{{ data.author }}</h2>
  <h2>{{ age }}</h2>                   // 直接使用 age
</template>

<script>
  import { ref, reactive, toRefs } from "vue";

  export default {
    setup() {
      const title = ref("Hello, Vue 3!");
      const data = reactive({
        author: "sheben",
        age: "20"
      });
      const dataAsRefs = toRefs(data)
      const { age } = dataAsRefs

      setTimeout(() => {
        title.value = "New Title";   // 使用 title.value 来修改其值
      }, 5000);

      return { title, data };
    }
  };
</script>

三、vue2.0 与 vue3.0 区别对比

  • 架构变化

    • 源码采用monorepo方式进行管理,将模块拆分到package目录中
      之前都是将不同的项目存放到不同的仓库,不好查找;而monorepo可以在同一个项目下管理不同的子项目;但是缺点就是仓库体积会变大

    • vue3 采用ts开发,增加类型检测。vue2则采用的是facebook的flow
      flow也是一种类型检测语言

    • vue3的性能优化,支持tree-shaking(主要靠打包工具rollup), 不适用就不会打包
      把vue2不常用的api干掉了,内部使用了函数式编程,可以使用不使用就不打包;而vue2内部是一个个的类堆起来的,不知道那些属性没有被用到,因为所有的属性都是在原型或者this上面的

    • vue2 后期引入了RFC,使每个版本改动可控
      RFC就是指定每个版本要增加哪些功能,像一个列表一样

  • 内部代码优化

    • vue3 劫持数据采用proxy;vue2 劫持数据采用的时definePropertydefineProperty有着性能问题和缺陷(最重要的一个更新)
      defineProperty是递归遍历,性能差,改变了原本对象的属性;而proxy是代理,是在取值的时候做一些事情,设置值的时候去做一些事情,不需要一上来就把所有对象的属性递归一遍,重新去改写,这叫懒递归;不会改变原有对象的属性,但是它的兼容性并不好,如果想在vue3中去兼容老的写法,其内部还是使用defineProperty

    • vue3 对模板编译进行了优化,编译时生成了Block tree,可以对子节点的动态节点进行收集,可以进行比较,并采用了patchFlag标记动态节点
      vue2 其实也做了优化:它是标记了模板里面的静态标签,每次更新的时候就跳过这些静态标签
      vue3 做的更纯粹,它是将模板里面可以修改的标签(动态标签)收集起来,到时候做diff算法的时候,直接去更改这些动态标签,这就叫Block tree,在对比的时候就减少了比对
      vue2在做diff比对的时候是两棵树的比较;而vue3这种做法就变成了两个数组的比对,效率肯定提高了
      vue3 对静态节点的标签也边得更细化,属性,类,内容,插槽等的比较

    • vue3 采用了compositionApi进行组织功能,解决反复横跳,优化复用逻辑(minix带来的数据来源不清晰,命名冲突等),相比optionApi类型推断更加方便
      compositionApi是我们在使用的时候,最直接感受到的改变;
      optionApi可能需要在data里面声明,但是可能在computed、watch、methods等地方被改变,一个逻辑被分散到了不同的地方,导致不好管理
      compositionApi 是把一些功能封装成一些方法,直接调用,函数式对于类型推断也更有利,逻辑也更加清晰,好管理,复用时可以将该函数提前出来,不在使用minix。

    • 增加了FragmentTeleportSuspense组件
      Fragment:我们可以在一个模板中使用多个根节点,其实它帮我们在最外层加了一层

四、vue3 script 的写法

<script lang="ts">
    // 为了能自动提示
    import {defineComponent} from "vue";
    export default defineComponent({
        // props: 父组件传过来的参数
        // context: 上下文,类似于this
        step(props, context){


        }
    })
</script>

五、vite 基础

5.1 什么是vite

法语Vite(轻量,轻快)vite 是一个基于 Vue3单文件组件的非打包开发服务器,它做到了本地快速开发启动, 实现按需编译,不再等待整个应用编译完成。生成环境其实还是用的rollup。

面向现代浏览器,基于原生模块系统 ESModule 实现。webpack的开发环境很慢(开发时需要进行编译放到内存中)

它会在node-modules里面去生成一个缓存文件.vite_opt_cache

5.2 vite的实现原理

我们先来总结下Vite的实现原理,vite在浏览器端使用 export import 的方式导入和导出模块,同时实现了按需加载。vite高度依赖module script特性

过程如下:

  • 在 koa 中间件里获取请求 body
  • 通过 es-module-lexer 解析资源 ast 拿到 import 的内容
  • 判断 import 的资源是否是 npm 模块
  • 返回处理后的资源路径:“vue” => “/@modules/vue”
  • 将处理的template,script,style等所需的依赖以http请求的形式,通过query参数形式区分并加载SFC文件各个模块内容。



文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

Logo

前往低代码交流专区

更多推荐