1.项目框架搭建之vue3技术选型

搭建一个后台管理系统前端框架，用来存放项目中遇到的比较好的技术实现，以及业务功能实现…持续更新中
常用hooks、自定义指令、通用组件、自开发插件等
比如在线编辑、在线预览、图片裁剪等

一、前言

技术选型，本人工作中一直使用的vue框架，恰逢vue3如火中天，所以架子采用以vue3+typescript+vite为主的技术生态。

二、vue2 or vue3 ——选vue3

1. vue2响应原理：详情请看Vue源码系列-Vue中文社区

首先，通过Object.defineProperty方法实现了对object数据的可观测，并且封装了Observer类，能够方便的把object数据中的所有属性（包括子属性）都转换成getter/seter的形式来侦测变化。

接着，通过依赖收集（发布订阅），在getter中收集依赖，在setter中通知依赖更新，以及封装了依赖管理器Dep，用于存储收集到的依赖。

最后，为每一个依赖都创建了一个Watcher实例，当数据发生变化时，通知Watcher实例，由Watcher实例去做真实的更新操作。

2. vue3响应原理：详情请看Vue3源码解析

首先，Vue3采用ES6的代理模式Proxy，Proxy可以劫持整个data对象，然后递归返回属性的值的代理，结合ES6的方法Reflect，将Object对象上一些明显属于语言内部的方法放到Reflect对象上面，让Proxy对象方便的调用对应的Reflect方法。

其次，通过effect方法在初始化执行的时候存储跟其有关的数据依赖，触发proxy的方法，get方法会调用track()进行依赖收集，建立一个对象(state)、属性(定义的属性)、effect副作用函数的依赖关系；set 方法会调用 trigger() 进行依赖更新；通过对象（state）与属性（定义的属性）找到对应的 effect 副作用函数，然后重新执行。

3. 选择vue3的原因：

Proxy 作为新标准将受到浏览器厂商重点持续的性能优化
Proxy 能观察的类型比 defineProperty 更丰富
Proxy 不兼容IE，也没有 polyfill, defineProperty 能支持到IE9
Object.definedProperty 是劫持对象的属性，新增元素需要再次 definedProperty。而 Proxy 劫持的是整个对象，不需要做特殊处理，例如不需要手动set。
使用 defineProperty 时，我们修改原来的 obj 对象就可以触发拦截，而使用 proxy，就必须修改代理对象，即 Proxy 的实例才可以触发拦截

总结：虽然vue3不支持ie，周边生态插件也都还在陆续升级更新中，但vue3更高效、更符合大型项目的实践，所以使用vue3。

三、JavaScript or Typescript ——选TypeScript

1. JavaScript

javascript是一门弱类型脚本语言，对于类型的要求和校验较低，开发过程中容易造成开发不规范，编码风格各式各样，因此采用typescript。

2. TypeScript 官方文档

typescript并非一门全新的语言，它从JavaScript生态系统和大量现存的JavaScript而来，是其超集，在运行时需要将typescript编译成JavaScript代码在运行环境中运行。
typescript使用了类型注解、接口、类、函数、泛型、枚举等一系列的约束方式，同时增加了类型检查，使代码更加规范。

四、vue-cli or vite ——选vite

1. Vue-CLI 官方文档

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

目前vue-cli处于维护模式，对于vue3支持程度不友好。

2. Vite Vite官方文档

是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）；一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

五、周边生态

路由管理：Vue Router

状态管理：Pinia

UI组件库：Element Plus

持续更新中…