Vue.js 3.0 探索

1.源码组织方式的变化

  • 源码采用 TypeScript 重写

  • 使用 Monorepo 管理项目结构,每个模块可单独测试、发布、使用

  • 源码目录结构:compiler 开头的为编译相关的代码,

    • compiler-core:与平台无关的编译器
    • compiler-dom:浏览器下的编译器依赖于compiler-core
    • compiler-sfc:single-file-component 编译单文件组件,依赖compiler-core、compiler-dom
    • compiler-ssr:服务端渲染编译器依赖于compiler-core
    • reactivity:数据响应式系统,可以独立使用
    • runtime-core:与平台无关的运行时
    • runtime-dom:针对浏览器的运行时,处理原生DOM 的API、事件
    • runtime-test:专门为测试编写的轻量级的运行时,这个运行时渲染的DOM 是js对象,可以运行在所有的 js 环境下,可以测试渲染是否正确,还可用于序列化DOM ,触发DOM事件,以及记录某次更新的DOM操作
    • server-renderer:服务端渲染
    • shared:Vue内部使用的公共API
    • size-check:私有包,不会发布到 npm ,在 TreeSharking 之后检查包的大小
    • template-explorer:浏览器运行的实时编译组件,会输出 render 函数
    • vue:构建完整版 Vue,依赖于 compiler 和 runtime
      在这里插入图片描述
  • 不同构建版本:在packages/vue/dist 目录下

    • cjs:commonjs 版本
    • global:全局完整版vue包含编译器与运行时与只包含运行时的版本
    • browser:esm 版本
    • bundler:未打包所有代码,要配合打包工具使用,使用 esm 方式

2.Composition API

  • 设计动机:Vue2.0 使用的Option API,包含一个描述组件选项(data、methods、props等)的对象,Option API 开发复杂组件,同一个功能逻辑的代码被拆分到不同选项。例如:一个表单验证的组件,要分别用到data、methods、props 等。并且难以提取组件重复代码。
  • Composition API:一组基于函数的 API ,可以更灵活的组织组件的逻辑,功能整齐且可提取可重用,同样可以使用 Option API

3.性能提升:

  • 响应式系统升级
    • 使用 Proxy 对象重写响应式系统:vue2.x 中 使用 defineProperty 在初始化时遍历 data 中的成员,实现响应式,若成员中嵌套成员则递归实现 get 、set ,如果 data 中的成员未被使用,也会做响应式处理的操作。但在 Vue3 中,只有在成员被用到的时候才会处理响应式
      • 可以监听动态新增的属性
      • 可以监听删除的属性
      • 可以监听数组的索引和 length 属性
  • 编译优化
    • Vue2.x 中通过标记静态根节点,优化 diff 的过程
    • Vue3.0 中标记和提升所有的静态根节点,diff 的时候只需要对比动态节点内容
      • Fragments:无需唯一根节点
      • 静态提升:所有静态节点提升只在初始化时渲染,优化 diff
      • Patch flag:标记所有动态节点,优化 diff 检查标记的内容即可
      • 缓存事件处理函数:将事件缓存到cache对象中,需要用时直接取出,避免不必要的更新操作
  • 源码体积优化
    • 移除不常用的API 例如:inline-template、filter 等
    • 优化 Tree-shaking :无引入不打包

4.Vite

介绍:Vite 开发构建工具,是一个基于浏览器原生ES模块导入的开发服务器,在开发环境下,利用浏览器去解析import,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随启随用。同时不仅对Vue文件提供了支持,还支持热更新,而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包

  • Vite vs Vue-Cli

    • Vite 在开发模式下不需要打包可以直接运行,在生产环境下使用 Rollup 打包
    • vue-cli 开发模式下必须对项目打包才可以运行,使用 Webpack 打包
  • 特点:

    • 快速冷启动
    • 按需编译
    • 模块热更新
  • 创建项目:

    • npm init vite-app
    • cd
    • npm install
    • npm run dev
  • 基于模板创建项目:

    • npm init vite-app --template react
    • npm init vite-app --template preact
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值