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

目录

vue3的设计思想、理念

设计思想

声明式架构

采用虚拟DOM

区分编译时和运行时

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

采用虚拟DOM

传统更新界面,拼接一个完整的字符串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项目结构

01-vue3的设计思想、理念和整体架构_第1张图片

 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

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

你可能感兴趣的:(从零搭建自己的Vue3,vue.js)