Vue.js 3.0 介绍

文章内容输出来源：大前端高薪训练营

一、Vue.js 源码组织方式

1. 源码采用TypeScript重写

提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言，在编码的过程中检查类型的问题。

2. 使用Monorepo管理项目结构

使用一个项目管理多个包，把不同功能的代码放到不同的package中管理，每个功能模块都可以单独发布，单独测试，单独使用。

3. 不同构建版本

Vue3中不再构建UMD模块化的方式，因为UMD会让代码有更多的冗余，它要支持多种模块化的方式。Vue3中将CJS、ESModule和自执行函数的方式分别打包到了不同的文件中。在packages/vue中有Vue3的不同构建版本。

• cjs（两个版本都是完整版，包含编译器）
  • vue.cjs.js
  • vue.cjs.prod.js（开发版，代码进行了压缩）
• global（这四个版本都可以在浏览器中直接通过scripts标签导入，导入之后会增加一个全局的Vue对象）
  • vue.global.js（完整版，包含编译器和运行时）
  • vue.global.prod.js（完整版，包含编译器和运行时，这是开发版本，代码进行了压缩）
  • vue.runtime.global.js
  • vue.runtime.global.prod.js
• browser（四个版本都包含esm，浏览器的原生模块化方式，可以直接通过<script type="module" />的方式来导入模块）
  • vue.esm-browser.js
  • vue.esm-browser.prod.js
  • vue.runtime.esm-browser.js
  • vue.runtime.esm-browser.prod.js
• bundler（这两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会让Vue体积更小）
  • vue.esm-bundler.js
  • bue.runtime.esm-bundler.js

二、Composition API

• RFC (Request For Coments)
  • https://github.com/vuejs/rfcs
• Composition API RFC
  • https://composition-api.vuejs.org

1. 设计动机

• Options API
  • 包含一个描述组件选项(data、methods、props等)的对象
  • Options API 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项
• Composition API
  • Vue.js 3.0 新增的一组API
  • 一组基于函数的API
  • 可以更灵活的组织组件的逻辑

三、性能提升

1. 响应式系统升级

Vue3使用Proxy对象重写了响应式系统。

• Vue.js 2.x中响应式系统的核心 defineProperty，初始化的时候递归遍历所有的属性，转化为getter、setter
• Vue.js 3.0中使用Proxy对象重写响应式系统
  • 可监听动态新增的属性
  • 可以监听删除的属性
  • 可以监听数组的索引和length属性

2. 编译优化

重写了DOM提高渲染的性能。

• Vue.js 2.x中通过标记静态根节点，优化diff的过程
• Vue.js 3.0 中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
  • Fragments（升级vetur插件）
  • 静态提升
  • Patch flag
  • 缓存事件处理函数

3.源码体积的优化

通过优化源码的体积和更好的TreeShaking的支持，减少大打包的体积

• Vue.js 3.0中移除了一些不常用的API
  • 例如：inline-template、filter等
• Tree-shaking
  • 例如：Vue3中的没用到的模块不会被打包，但是核心模块会打包。Keep-Alive、transition等都是按需引入的。

四、Vite

Vue的打包工具。Vite是法语中的"快"的意思

1. ES Module

• 现代浏览器都支持ES Module（IE不支持）

• 通过下面的方式加载模块

• <script type="module" src="..."></script>

• 支持模块的script默认延迟加载

• 有了type="module"的模块是延迟加载的，类似于script标签设置defer

  • 在文档解析完成后，也就是DOM树生成之后，触发DOMContentLoaded事件前执行

2. Vite as Vue-CLI

• Vite 在开发模式下不需要打包可以直接运行
• Vue-CLI开发模式下必须对项目打包才可以运行
• Vite在生产环境下使用Rollup打包
  • 基于ES Module的方式打包
• Vue-CLI使用Webpack打包

3. Vite特点

• 快速冷启动
• 按需编译
• 模块热更新

4. Vite创建项目

• Vite创建项目

  npm init vite-app <project-name>
  cd <project-name>
  npm install
  npm run dev
  
      
  
     
  
      
  1
      
  2
      
  3
      
  4
     

• 基于模板创建项目

  npm init vite-app --template react
  npm init vite-app --template preact
  
      
  
     
  
      
  1
      
  2
     

文章来源: blog.csdn.net，作者：爱玲姐姐，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/jal517486222/article/details/108689462