vue3基础使用总结

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:a 和 b + onUpdate:b

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

解析成：
a + onUpdate:a 和 b + 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 劫持数据采用的时defineProperty；defineProperty有着性能问题和缺陷（最重要的一个更新）
    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。

  • 增加了Fragment、Teleport、Suspense组件
    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文件各个模块内容。

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