01-vue3的设计思想、理念和整体架构

目录

vue3的设计思想、理念

设计思想

声明式架构

采用虚拟ＤＯＭ

区分编译时和运行时

Vue整体架构

架构介绍

Monorepo管理项目

Vue3项目结构

 Vue3采用typescript

Vue3开发环境搭建

---

vue3的设计思想、理念

设计思想

1.Vue3.0 更注重模块上的拆分，在2.0中无法单独使用部分模块，需要引入完整的Vuejs（例如只想使用响应式部分，但是需要引入完整的Vuejs），Vue3中的模块之间耦合度低，模块可以独立使用，拆分模块。

2.Vue2中很多方法挂载到了实例中导致没有使用也会被打包（还有很多组件也是一样）。通过构建工具Tree-shaking机制实现按需引入，减少用户打包后体积。nextTick等等都拆分为了单独的组件。 重写API。

3.Vue3允许自定义渲染器，拓展能力强。不会发生以前的事前，改写Vue源码改造渲染方式。不需要在源码的基础上进行改造了。拓展更方便

依然保留Vue2的特色

声明式架构

Vue3依旧是声明式的框架，用起来简单。

• 早在JQ的时代编写的代码都是命令式的，命令式框架重要特点就是关注过程。
• 声明式框架更加关注结果。命令式的代码封装到了Vuejs中，过程靠Vuejs来实现。

声明式代码更加简单，不需要关注实现，按照要求填代码就可以（给原材料就出结果）

/* 命令式编程 */

let numbers = [1,2,3,4,5];
let total = 0;
for(let i = 0;i<numbers.length;i++){
    total += numbers[i]  /* 关注了过程 */
}
console.log(total)

/* 声明式 */

let total2 = numbers.reduce(function(memo ,current){
    return memo + current
},0)

console.log(total2)

采用虚拟ＤＯＭ

传统更新界面，拼接一个完整的字符串innerHTML全部重新渲染，添加虚拟DOM后。可以比较新旧虚拟节点，找到变化再进行更新。虚拟DOM就是一个对象，用来描述真实DOM的

const vnode = {
    _v_isVNode: true,
    _v_skip: true,
    type}

区分编译时和运行时

• 我们需要有一个虚拟DOM，调用渲染方式将虚拟DOM渲染成真实DOM（缺点就是虚拟DOM编写麻烦）
• 专门写一个编译时可以将模板编译成虚拟DOM（在构建的时候进行编译性能更高，不需要在运行的时侯进行编译，而且Vue3在编译中做了很多优化）

Vue整体架构

架构介绍

Monorepo管理项目

Monorepo是管理项目代码的一个方式，指在一个项目仓库（repo）中管理多个模块/包（package）。Vue3源码采用monorepo方式进行管理，将模块拆分到package目录中。

• 一个仓库可维护多个模块，不用导出找仓库
• 方便版本管理和依赖管理，模块之间的引用，调用都非常方便

Vue3项目结构

 Vue3采用typescript

Vue2采用flow来进行类型检测（Vue2中对TS支持并不太好），Vue3源码采用typescript来进行重写，对Ts的支持更加友好。

Vue3开发环境搭建

搭建Monorepo环境

Vue3中采用 pnpm workspace 来实现 monorepo（pnpm是快速、节省磁盘空间的包管理器。主要采用符号链接的方式管理模块）

全局安装pnpm

npm install pnpm -g # 全局安装pnpm

pnpm init -y # 初始化配置文件

创建 .npmrc文件

shamefully-hoist =  true

解决pnpm的幽灵依赖问题，羞耻提升

安装所需要的依赖

pnpm install typescript minimist esbuild -w

-w表示安装在根目录下。此时文件夹下的每个package都是个单独的包，所以需要加 -w 说明这是每个包都需要的依赖，安装在根目录下。

pnpm tsc --init  // 初始化 typescript

后续配置参考源码中的配置