Vue.js 3.0 Composition APIs 及 3.0 原理剖析

Vue 3.0与Vue 2.0的区别

• 源码组织方式发生变化
• Composition API
• 性能提升
• Vite

Composition API 设计动机

• Vue 2.x开发需要长期迭代的大型项目时，组件的开发采用的是Options API
  Options API指的是使用包含一个描述组件选项（data，methods，props等）的对象创建组件的方式，
  Options API开发组件时，同一功能逻辑的代码被拆分到不同选项(data，methods，props等)，所以一些功能比较复杂的组件阅读维护起来比较困难,并且难以提取组件中可重用的逻辑，虽然Vue 2.0中有mixins混入的机制可以把组件中重复的代码提取并重用，但mixins存在命名冲突，数据来源不清晰的问题
• Composition API是Vue 3.0新增的一组API是一组基于函数的API，可以更灵活的组织组件内的逻辑

Vue 3.0性能提升

• 响应式系统升级
  • Vue 2.x中响应式系统的核心defineProperty，在初始化时遍历data中的所有成员对象，通过defineProperty把对象的属性转换为getter和setter，如果对象的属性还是对象，则会递归处理。这些都是在初始化时进行的，即使你没有使用某个属性，也会进行响应式处理
  • Vue 3.0中使用Proxy对象重写了响应式系统，Proxy的性能本身就比definePropery好，同时Proxy能拦截属性的访问、赋值、删除等操作，不需要初始化时遍历所有的属性，如果存在多层属性嵌套的话，只有访问该属性时才会递归处理
    • 可以监听动态新增的属性
      • Vue 2.x 需要通过Vue.$set
    • 可以监听删除的属性
      • Vue 2.x无法监听属性的删除
    • 可以监听数组的索引和length属性
      • Vue 2.x无法监听
• 编译优化
  • Vue 2.x中模板首先需要编译成render函数，一般在构建的过程中完成， 在编译的过程中会编译静态根节点和静态节点，静态根节点要求节点中必须有一个静态子节点，当组件状态发生变化后，会通知watcher，触发wather的update，最终去执行虚拟dom的patch操作，遍历所有的虚拟节点找到差异，更新到真实DOM上，diff的过程中会比较整个虚拟dom，先对比新旧的div及其他的属性，然后再对比内部的子节点
  • Vue 3.0中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容，虚拟dom中diff的过程是最耗时的， 在Vue 2.x中，重新渲染时会重新创建新旧vnode，diff的时候会跳过静态根节点，对比每一个新旧vnode（即使这个节点什么都没做），Vue 3.0 通过标记和提升静态节点，以及patch flag 标记动态节点，大大提升了diff的性能
  • Vue 3.0新引入了Fragments（注意使用3.0需要在vscode中升级vetur插件，否则vscode仍会提示报错），模板中不需要在创建一个唯一的根节点，可以直接放入文本内容或许多同级的标签
  • 缓存事件处理函数，通过对事件处理函数的缓存避免了不必要的更新操作
• 源码体积优化
  • 移除了一些不常用的API，比如inline-template、filter等
  • 对Tree-shaking的支持更好

Vite

• Vite是一个面向现代浏览器的一个更轻更快的web应用开发工具（使用Rollup进行打包），有效解决了webpack在开发阶段使用webpack dev server冷启动时间过长（webpack在模块比较多的时候打包速度过慢，webpack会提前把所有模块打包，无论这个模块是否使用到，把打包结果存储在bundle（内存）中，然后才会启动web server ），webpack hmr热更新反应速度慢（vit只会立即编译当前修改的文件，而webpack会自动以这个文件为入口重新build一次，所有涉及到的依赖也都会呗加载一遍）的问题
  • 采用webpack打包的原因
    • 当初浏览器并不支持模块化
    • 零散的模块文件会产生大量的http请求，当js文件比较多的时候，每个js文件都要发送一次请求，创建一个连接，打包后可以减少请求次数（这个问题http2已经解决，可以复用连接）
• 相较于Vue-cli创建的项目少了许多配置文件和依赖
• 基于ECMAScript标准原生模块系统（ES Modules）实现

ES Module

• 现代浏览器都支持ES Module (IE不支持)
• 通过type="module"加载模块

• 支持模块的script默认是延迟加载的
  • 类似于script设置defer属性
  • 在文档解析完成后，在DOM树生成之后，

Vite和Vue-cli的区别

• Vite在开发模式下不需要打包，可以直接运行，因为在开发模式下，Vite使用浏览器原生支持的ESModule加载模块，因为不需要打开，所以开发模式下可以秒开页面，同时Vue会开启一个测试的服务器，会拦截服务器发送的请求，浏览器会向服务器发送请求，请求对应的模块，Vite会对浏览器不识别的模块进行处理，如.vue单文件组件，会在服务器上对文件进行编译，把编译的结果返回给服务器；Vue-cli开发模式下必须对项目打包才能运行
• Vite在生产环境下使用Rollup打包，
  • 基于ES Module的方式打包，不需要使用babel把import转换成require以及相应的辅助函数，所以体积更小
• Vue-cli使用webpack打包

Vite特点

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

Vite创建项目

• Vite创建基于Vue3的项目

npm install vite-app 

• 基于模板创建项目(可以支持其他框架，后面跟上需要使用的框架)

npm init vite-app --template react
npm init vite-app --template preact

Vite项目依赖

• Vite（目前仅支持Vue3.0）
• @vue/compiler-sfc

Vue 3.0 响应式系统

• Proxy对象实现属性监听
• 多层属性嵌套，在访问属性过程中处理下一级属性
• 默认动态监听添加的属性
• 默认监听属性的删除操作
• 默认监听数组索引和length属性
• 可以作为单独模块使用

reactive函数

• 接受一个参数，判断该参数是否是对象（与ref不同，reactive只能把对象转换为响应式对象）
• 创建拦截器对象handler，设置get/set/deleteProperty
• 返回Proxy对象