Vue.js 3.0介绍

源码组织方式

与2.0的区别

• 源码组织方式的变化 ，全部采用TS重写，独立的功能模块提取到不同的包中
• Composition API，3.0依然兼容2.x，增加组合API
• 性能提升 ,使用proxy代理对象，重写响应式代码，对编译器进行优化，重写虚拟DOM，服务端渲染提升到2-3倍
• Vite，使用其在开发阶段测试不需要打包，可以直接运行项目，提升开发效率

源码组织方式

• 采用Typescript重写，
• 使用Monorepo管理项目结构

packages目录下，compile开头的都是编译相关的，runtime是运行时相关内容，reactivity是响应式系统

不同的构建版本

Vue3.0 构建时和2.0类似，都是采用不同构建版本，在不同场合使用
但是不构建UMD模块化方式，umd模块化方式代码有更多的冗余
Vvue3.0 中把c.js，es module 和自执行函数方式分别打包不同文件中

构建版本

• c.js
  • Vue.cjs.js
  • vue.cjs.prod.js
• global
  -vue.global.js
  vue.global.prod.js
  vue.runtime.global.js
  vue.runtime.global.prod.js
  …

Composition API

设计动机

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

Composition API Demo

export default {
   
  data(