关于vue3:Vue30

之前曾经理解过了 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 >
//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 type=”module” src=”…”></script>

• 反对模块的 script 默认提早加载,module 默认提早加载

  • 相似于 script 标签设置 defer
  • 在文档解析实现后，触发 DOMContentLoaded 事件前执行

Vite 比照 Vue-CLI

• Vite 在开发模式下不须要打包能够间接运行

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

  • Vite 在生产环境下应用 Rollup 打包

    • 基于 ESModule 的形式打包, 打进去的包体积更小
• Vue-CLI 开发模式下必须对我的项目打包才能够运行

vite 创立我的项目

基于模板创立