了解vue3、对比vue2

了解vue3、对比vue2：

关键词：项目组织方式、Composition API、性能提升、vite

一、项目组织方式：

关键词：ts、Monorepo、独立功能块

vue3源码全部采用ts重写，项目组织方式发生变化，使用Monorepo的方式组织项目结构，（一个项目管理多个包package）把独立的功能模块提取到不同的包中(每个包：功能划分明确、依赖关系明确、单独测试、单独发布、单独使用)；

packages包介绍：

关键词：compiler、reactivity、runtime、ssr

compiler-core: 平台无关的编译器
compiler-dom: 浏览器平台下的编译器，依赖于compiler-core
c-sfc: sfc编译单文件组件vue，依赖于compiler-core、compiler-dom
c-ssr: 服务端渲染编译器，依赖于compiler-dom

reactivity: 数据响应式系统，可以独立使用

runtime:
runtime-core: 平台无关的运行时
runtime-dom: 针对浏览器平台的运行时，处理原生DOM的API、事件等
runtime-test: 为测试编写的轻量级的运行时；
由于这个运行时渲染出的DOM树是一个js对象，所以可运行在所有js环境里；
可用来测试渲染是否正确、序列化ODM、触发DOM事件、记录某次更新中的DOM操作

server-render: 用于服务端渲染，
shared: vue内部使用的一些公共API
size-check: 私有的包，不发npm，在tree-shaking检查包的大小
template-explorer: 在浏览器里运行的实施编译组件，输出render函数，readme中提供在线访问地址
vue: 构建完整版的vue，依赖于comipler、runtime

sfc-playground: ??
vue-compat: ??

sfc： 单文件组件

不同构建版本

vue3不再构建umd，因其会制造冗余（支持多种模块化构建方式）；
cjs(commonjs)、esmodule、自执行函数，分别打包到不同的文件中；
packages/vue/dist 存放所有vue的构建版本
prod.js(生产版本被压缩)、runtime运行时、

• cjs:
  vue.cjs.js
  vue.cjs.prod.js
• global: 全局，script标签引入生产一个全局vue对象
  vue.global.js
  vue.global.prod.js
  vue.runtime.global.js
  vue.runtime.global.prod.js
• broswer: esm: 浏览器原生模块化方式，script type="module"导入
  vue.esm-broswer.js
  vue.esm-broswer.prod.js
  vue.runtime.esm-broswer.js
  vue.runtime.esm-broswer.prod.js
• bundler: 未打包所有代码，需要配合打包工具使用, esm模块化方式, import导入runtime-core/runtime-compiler
  vue.esm-bundler.js
  vue.runtime.esm-bundler.js 脚手架默认导入，让vue提交更小

二、Composition API

90%以上的API依然兼容2.x，且根据社区反馈添加Composition API（组合API，解决vue2在开发大型项目时遇到超大组件使用options API不好拆分和重用的问题）

Composition API设计动机

关键词：RFC、设计动机（optionsAPI、mixin、Composition API）
RFC(Request For Comments)
Composition API RFC 使用文档

• 设计动机：
  1、options API(包含描述组件选项：data、options、props等的对象)开发复杂组件不便，同一个功能的代码被拆分到不同选项；
  2、mixin混入，提取并重用重复的代码，但会出现命名冲突、数据来源不清晰的问题；

Composition API介绍：

基于函数的新增(之前的仍可用)API、可更灵活的组织组件的逻辑
相同功能代码相对集中（组织代码内部结构）、提取复用优先推荐；

vue3组合式API简学

三、性能提升 ：

关键词：Proxy（响应式系统）、编译器（ + 源码体积）、vNode(虚拟dom)、ssr

1. Proxy重写响应式代码；
2. 对编译器进行优化；
3. 重写了虚拟dom，让渲染和update性能有大幅提升；
4. 官方介绍服务端渲染也提高了2-3倍；

1、响应式系统升级

vue2 defineProperty

• 对象：
  1、初始化时递归处理每一个属性；
  2、动态新增需要通过 $set补充；
  3、监听不到属性的删除 $delete；
• 对数组的索引和length属性的修改页监听不到；
• 但兼容性好，支持最低至IE9；

vue3 proxy：

• 本身性能就比dP好
• 对象：
  1、可以直接监听对象而非属性，初始化时避免循环递归对每个对象属性定义属性描述符；
  2、值为对象的属性只有在访问某个属性的时候，才会递归处理下一级属性，减少系统消耗；
  3、监听动态新增属性
  4、监听属性的删除；
• 可以直接监听数组的变化，无需重写常用数组方法、监听索引和length 属性； 有多达 13 种拦截方法,不限于apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
• 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
• 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
• Proxy不支持IE；

2、编译优化

关键词：Fragments、静态提升（静态子节点）、Patch flag、缓存事件函数、按需引用

Fragments（片段）：

模板中不需再创建一个唯一的根节点，可直接放置文本内容或者很多同级标签（在vscode中需升级vetur插件，避免错误提示）

静态提升：

后续render，不需再次创建，直接应用

Patch flag(diff时检查)：

重写vnode，如1 标记 ‘文本’动态绑定，只检查对应标记的内容是否变化

缓存事件处理函数：

缓存函数绑定不会变化，运行时会重新获取handler，减少不必要的更新操作；

按需引用

tree-shaking特性 + 组合式API将模块单独化

3、源码体积优化

关键词：不常用API、tree-shaking+esm
vue3移除了一些不常用API：inline-template、filter等；
vue3对tree-shaking支持更好，tree-shaking依赖esm(import\export)，通过编译阶段的静态分析哪些模块已经加载、哪些模块和变量未被使用或者引用，在打包的时候过滤掉不必要的；

四：vite

关键词：脚手架工具（vue-cli）、es module、快、快速冷启动、按需编译、模块热更新、生产rollup、扩展框架react等

对比vue-cli：

对比项	vue-cli	vite
开发阶段	需借助webpack辅助打包直接运行项目，启动时长、占内存大、热更新慢；	基于es module，开发阶段不需编译打包直接运行项目，提高开发效率（借由浏览器辅助请求sfc，编译后提供给浏览器）
支持框架	vue	vue、react等，不限制

vite特点：

• 快速冷启动（不需打包）
• 按需编译（浏览器请求再编译，不需开启项目时等待打包）
• 模块热更新（性能与模块总数无关）
• 在生产环境下使用Rollup(基于es module)打包：不使用babel把import转require及响应的辅助函数，打包体积比webpack小
• 基于vue3

es module：

• 现代浏览器都支持，除IE；
• 以：<script type="module" src="..."></script>方式加载，支持script默认延迟加载(类似于标记defer)，是在文档解析DOM完成后，触发DOMContentLoaded事件前执行；

vite简介、原理及简单实现