本期摘要

新版 Vue 3 中文文档正式上线
小程序新渲染引擎 Skyline Beta
单元测试框架Vitest
TailWInd Css
2022 前端趋势报告

技术资讯

1. Vue 2.7发布代号 Naruto 火影忍者

向后移植的功能

2.7 版本的影响如前所述，2.7 是 Vue 2.x 的最终次要版本。在这个版本之后，Vue 2 进入了 LTS（长期支持），从现在开始持续 18 个月，并且将不再接收新功能。这意味着Vue 2 将在 2023 年底结束生命周期。我们认为这应该为大多数生态系统迁移到 Vue 3 提供充足的时间。

3. 小程序新渲染引擎 Skyline Beta

为了使小程序的性能接近原生的用户体验，小程序推出了新的渲染引擎 Skyline。我觉得可能是翻译为”天际线” 新的架构相比原有的 WebView 架构，有以下特点：

界面更不容易被逻辑阻塞，进一步减少卡顿；
无需为每个页面新建一个 JS 引擎实例（WebView），减少了内存、时间开销；
框架可以在页面之间共享更多的资源，进一步减少运行时内存、时间开销；
框架的代码之间无需再通过 JSBridge 进行数据交换，减少了大量通信时间开销。

新的渲染流程如下图所示：

4. 单元测试框架Vitest

Vitest旨在将自己定位为Vite项目的首选测试框架,在Vite项目中使用Vitest可以共享相同的插件和 vite.config.js。主要特性:

与Vite通用的配置、转换器、解析器和插件。
使用你的应用程序中的相同配置来进行测试！
智能文件监听模式，就像是测试的 HMR！
支持测试 Vue、React、Lit 等框架中的组件。
开箱即用的 TypeScript / JSX 支持
ESM 优先，支持模块顶级 await
通过 tinypool 使用 Worker 线程尽可能多地并发运行
套件和测试的过滤、超时、并发配置
Jest 的快照功能
内置 Chai 进行断言 + 与 Jest expect 语法兼容的 API
内置用于对象模拟(Mock)的 Tinyspy
使用 jsdom 或 happy-dom 用于 DOM 模拟
通过 c8 来输出代码测试覆盖率
类似于 Rust 语言的源码内联测试
5. Web Animations API
getAnimations
通过 getAnimations 我们可以获取到当前元素的正在运行的动画的 Animate 对象，如果传入参数 {subtree: true} 还能获取到包括其所有子元素、伪元素的动画。

通过拿到的 animate，我们可以直接对其进行各种操作，如：

pause - 暂停动画
play - 播放动画
cancel - 取消动画状态
reverse - 反向执行动画到开始状态
finish - 直接跳到动画结束阶段

animate 方法则可通过 JS 给元素添加动画：Element.animate(keyframes, options)

anim.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }, { transform: 'translateX(0)' }],
  1000
);

6. pnpm 是凭什么对npm 和yarn降维打击的

pnpm对比npm和yarn在速度和节省磁盘空间上具有一定的优势, 但作为新兴的包管理工具在稳定性和协统上可能还是不如npm和yarn. 以下是pnpm的原理图

7. Tailwind CSS 在过去两年的流行程度一直保持一个高速增长的态势

tailiwind 是很具争议的CSS框架, 但是增长趋势确实表明他有很大的可取之处理念: 无需离开您的html, 即可快速建立现代网站在我写vue单文件组件的过程中, 如果页面稍微复杂, 在写style标签和tempalte标签的时候就需要上下反复横跳所以我觉得把tailWind当做辅助工具减少反复横跳, 可以极大的提升开发体验

8. 2022年CSS新特性

容器查询@container类似于媒体查询@media，区别在于查询所依据的对象不同。媒体查询依据的是浏览器的视窗大小，容器查询依据的是元素的父元素或者祖先元素的大小。
级联层（Cascade Layers）
颜色函数 color-mix() color-contrast()
伪类选择器:has()
- :has()选择器也可以叫做父类选择器，它接受一个选择器组作为参数。有了它，我们可以给有匹配子元素的父类应用一些样式。例如：a:has(span) // 只会匹配包含 span 子元素的 a 元素：
content-visible

利用content-visible开发虚拟列表

媒体查询（Media Query Ranges）

媒体查询不是一个新概念，这次在语法上进行了优化。原来通过max-width和min-width来实现的现在可以通过数学运算符>=、<=来实现。相比与原来的写法，新的语法更容易理解一些。比如要实现750px以下屏幕的样式，原来需要应用@media (max-width: 750px)，现在可以直接写成@media (width <= 750px)。同样，数学运算符的写法也适用于上面介绍的容器查询@container中。

// 原写法
@media (max-width: 750px) {
  …
}
@media (min-width: 750px) {
  …
}
@media (min-width: 375px) and (max-width: 750px) {
  …
}
// 新写法
@media (width <= 750px) {
  …
}
@media (width >= 750px) {
  …
}
@media (375px <= width <= 750px) {
  …
}

9. ES 2022正式发布! 有哪些新特性

新的class成员

class MyClass {
  instancePublicField = 1;
  static staticPublicField = 2;

  #instancePrivateField = 3;
  static #staticPrivateField = 4;

  #nonStaticPrivateMethod() {}
  get #nonStaticPrivateAccessor() {}
  set #nonStaticPrivateAccessor(value) {}

  static #staticPrivateMethod() {}
  static get #staticPrivateAccessor() {}
  static set #staticPrivateAccessor(value) {}

  static {
    // 静态初始化代码块
  }
}

模块中的顶层await 我们现在可以在模块的顶层使用 await 并且不再需要输入异步函数或方法

// my-module.mjs
const response = await fetch('https://example.com');
const text = await response.text();
// 之前的写法
const text = async ()=>{
  await response.text()
}
console.log(text);

数组的可索引值方法 .at()

方法 .at() 让我们可以读取给定索引处的元素 (就像 []) 而且支持负数 (与 []不同):

Object.hasOwn(obj, propKey)

提供安全的方法检测对象的自有属性

10. web3.0 开发入门

个人理解web3.0离普通开发者还太远, 但是作为趋势了解一下还是很有意思的 Web 3.0 的概念是由以太坊联合创始人 Gavin Wood 在 2014 年提出的，指基于区块链的去中心化在线生态系统，它代表了下一代互联网时代。目前 Web 3.0 仍处于起步阶段，但是发展非常迅猛，其去中心化、抗审查等特点使得人们更容易建设一个开放的网络生态。

11. 低代码平台

低代码现在在社区争议非常大, 有的说低代码才是未来, 有的说低代码是行业毒瘤低代码是新一代的软件开发方法和理念，将程序员从没有技术含量的CRUD工作中解放出来，做更有技术含量、更有价值的事情。咱们先看看科技巨头在”低代码”领域的布局 一、阿里 阿里年初推出了“云钉一体”战略，把钉钉、宜搭、阿里云等平台进行整合。为企业提供全生命周期的IT解决文案： 基础设施层，由阿里云提供网络、主机服务，为企业打造云端IT基础设施。 中台体系，由阿里数据中台、技术中台、钉钉中台，组成的标准化服务能力。 前台应用，通过宜搭、以及用户自建的业务应用软件构成。可见，以宜搭为代表的低代码平台，在阿里 toB 解决文案生态中，占据重要地位，是“云钉一体”战略中很重要的一块拼图。

二、腾讯 低代码在腾讯内部有着非常广泛的应用，比如“星图低代码平台”是为游戏营销活动开发而设计的。微信支付、腾讯广告相关的部门也有相关的低代码产品，也都是为了提升各自业务场景下的研发效能而建设的。腾讯将各个事业部的低代码平台进行整合，推出了OTeam平台。它是真正意义上的低代码平台，包含了：UI可视化、逻辑可视化、DSL代码语言、生产和运行模块、质量保障模块，以及配套的IDE开发工具。

12. 2022年前端趋势调查报告

这份报告详尽的调查了前端各个方面技术运用的数据, 可以帮助你了解前端趋势几个有意思的结果:

使用过也很喜欢的框架

React > Next > Vue> Angular >Svelte

未来更想学习那些框架

ESR（Edge Side Rendering，边缘渲染）是最近的一大热门趋势，可以直接在 CDN 级别实现按需渲染。Nuxt 3、Remix 以及 Sveltekit 等框架都在朝着这个方向发展，目测会在未来的一到两年会成为一大焦点。

Typescript的未来

有 43% 的受访者表示，TypeScript 将超越 Javascript 成为新的前端标准，最近这一点也越来越明显了，以原生 TypeScript 编写的库明显增加，并且大多数新的开发工具都提供了开箱即用的 TypeScript 支持。不过，就在今年 3 月份，微软宣布了在 Javascript 中引入 TypeScript 的类型语法的提案，引起了前端社区的剧烈讨论。这项投票的第三条（ JavaScript 会变成 Typescript 之类的东西）似乎有有了那么些可能了。

最喜欢的桌面编辑器

在前端开发方面，Visual Studio Code 还是编辑器的王者，尤其是它的扩展系统，让 WebStorm 之类的其他编辑器都稍显逊色。 Visual Studio Code占比达到74.4%

2022前端技术趋势

经验