Vue3.0

之前已经了解过了vue2.0版本，现在我们来了解一下3.0版本.

首先我们来看下变化：

源码组织方式的变化.
Composition API
性能提升
Vite

首先源码的组织方式

首先类型约束2.0是flow然后3.0源码采用TypeScript重写
然后就是使用Monorepo管理项目结构

3.0

2.0

然后就是Composition API

设计动机：

回顾OptionsAPI
包含一个描述组件选项(data、methods、props等)的对象
OptionsAPI开发复杂组件，同一个功能逻辑的代码被拆分到不同选项

随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，代码可复用性也不高

CompositionAPI

Vue.js3.0新增的一组API
一组基于函数的API
可以更灵活的组织组件的逻辑

通过compostion API显然我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起

setup函数

vue3中专门为组件提供的新属性.它为我们使用vue3的Composition API 新特新提供了统一的入口.之前定义的data,methods等都统一放入setup中实现。

setup函数会在beforeCreate之后、created之前所以它内部的this指向window,

接收外界传入的props,接受的组件必须props里需要声明否则拿不到传值.

  //home.vue里
  < setup : data = "123" >
//setup.vue里
export default {
  setup (props) {
    console.log(props.data)
  },
  props: {
    data: Number
  }
}

在新版的生命周期函数，可以按需导入到组件中，且只能在setup()函数中使用.

import { onMounted, onUnmounted } from 'vue';
export default {
  setup () {
    onMounted(() => {
      //
    });

    onUnmounted(() => {
      //
    });
  }
};

性能提升

响应式系统升级
编译优化
源码体积的优化

vue2.x中响应式系统的核心defineProperty

vue3.0中使用Proxy对象重写响应式系统

可以监听动态新增的属性
可以监听删除的属性
可以监听数组的索引和length属性
不需要一个一个侵入对象递归劫持属性,而是直接代理对象

编译优化：
2.x中通过标记静态根节点，优化diff的过程

3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容

Fragments（升级vetur插件）
静态提升
Patchflag
缓存事件处理函数

优化代码打包体积，Vue.js3.0中移除了一些不常用的API，例如：
inline-template、filter等，然后就是Tree-shaking 摇树优化

最后是Vite

首先我们来看esm

现代浏览器都支持ESModule（IE不支持）
通过下面的方式加载模块
支持模块的script默认延迟加载,module默认延迟加载
- 类似于script标签设置defer
- 在文档解析完成后，触发DOMContentLoaded事件前执行

Vite对比Vue-CLI

Vite在开发模式下不需要打包可以直接运行
- 快速冷启动
- 按需编译
- 模块热更新
- Vite在生产环境下使用Rollup打包
  - 基于ESModule的方式打包,打出来的包体积更小
Vue-CLI开发模式下必须对项目打包才可以运行

vite创建项目

基于模板创建