vue3.X

Vue.js3.0

• 源码组织方式的变化
• CompositionAPI
• 性能提升
• Vite

一、源码组织方式

• 源码采用TypeScript重写
• 使用Monorepo管理项目结构

二、vue.js3.0 不同构建版本

• packages/vue
  • cjs
    • vue.cjs.js
    • vue.cjs.prod.js
• global
  • vue.global.js
  • vue.global.prod.js
  • vue.runtime.global.js
  • vue.runtime.global.prod.js
• browser
  • vue.ems-browser.js
  • vue.esm-browser.prod.js
  • vue.runtime.esm-browser.js
  • vue.runtime.esm-browser.prod.js
• bundler
  • vue.esm-bundler.js
  • vue.runtime.esm-bundler.js

三、Vue.js3.0 Composition API 设计动机

• RFC(Request For Comments)

  • https://github.com/vuejs.rfcs

• CompositionAPI RFC

  • https://composition-api.vuejs.org

• CompositionAPI设计动机

  • Options API
    • 包含一个描述组件选项（data、methods、props等）的对象
    • Options API 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项

• Options API DEMO

image.png

• Composition API DEMO

  
  image.png

四、性能提升

• 响应式系统提升
  • vue.js2.x中响应式系统的核心 defineProperty
  • vue.js3.0中使用Proxy对象重写响应式系统
    • 可以监听动态新增的属性
    • 可以监听删除的属性
    • 可以监听数组的索引可length属性
• 编译优化
  -vue.js 2.x 中通过标记静态根节点，优化diff的过程
  • Vue.js 3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
    • Fragments（片段）(升级vetur插件)
    • 静态提升
    • Patch flag
    • 缓存时间处理函数
• 源码体积的优化
• Vue.js 3.0 中移除了一些不常用的API
  • 例如：inline-template、filter等
• Tree-shaking

四、Vite

ES Module

image.png image.png

Vite 特点

• 快速冷启动

• 按需编译

• 模块热更新

• 在生产环境下使用Rollup打包

  • 基于ES Module 的方式打包

• Vue-CLI使用Webpack打包

• Vite 创建项目

  
  image.png