Vue3.0与Vue2.x的区别

一. 源码组织方式变化

1. 源码采用typeScript重写
2. 使用Monorepo管理项目结构,把不同功能的代码放入不同的packages中进行管理,这样有利于功能和模块划分明确,并且每个功能模块都能单独测试单独发布单独使用
   

二. 增加Composition

CompositionAPI解决2.0使用optionsAPI不好重用与拆分的问题

Options API

在vue2中我们会在一个vue文件中data，methods，computed，watch中定义属性和方法，共同处理页面逻辑. 一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散.即使通过Mixins重用逻辑代码，也容易发生命名冲突且关系不清.

Composition API

在vue3 Composition API 中，代码是根据逻辑功能来组织的，一个功能的所有api会放在一起（高内聚，低耦合），这样做，即时项目很大，功能很多，都能快速的定位到这个功能所用到的所有API.提高可读性和可维护性，而且基于函数组合的 API 更好的重用逻辑代码.

三. 性能提升

1. 使用Proxy代理对象重写了响应式
   Proxy可以监听对象动态新增的属性,删除属性,数组的索引和length

2. 对编译器作了优化

   Vue2.x中通过标记静态根节点优化diff过程

   Vue3.0中标记和提升所以的静态根节点,diff只需对比动态节点内容

   • Fragments(没有根节点同样会生成一个树形代码片段)
   • 对静态节点进行提升
   • Patch flag 标记动态节点属性和内容
   • 缓存事件处理函数
     Vue 3 Template Explorer 测试

3. 优化了打包体积

   • Vue3.0中移除了一些不常用的API,如:inline-template,filter等
   • Tree-shaking不打包没有用到的API,但是核心的API都会被打包

四. Vite开发工具

1. 快速冷启动

   Vite 无需打包即可直接运行项目.提升了开发效率.而Vue-cli开发模式下必须对项目打包才能运行

2. 按需编译

3. 模块热更新

4. Vite在生产环境下使用Rollup打包

   • Rollup基于ESModule的方式打包,不需要像webpack一样使用babel把import转换成require以及一些辅助函数.因此它的打包体积比webpack更小.

5. 使用

   # vite创建项目
   npm init vite-app
   cd <project-name>
   npm i
   npm run dev
   # vite基于模板创建项目
   npm init vite-app --template react
   npm init vite-app --template preact