基本类型

• 类型声明

  • 类型声明是TS非常重要的一个特点

  • 通过类型声明可以指定TS中变量（参数、形参）的类型

  • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

  • 语法：

1
2
3
4
5
6
7

let 变量: 类型;

let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{
    ...
}

• 自动类型判断

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

• 类型：

AiEditor 是面向 AI 时代的新型富文本编辑器，兼容多种前端框架如 Layui、Vue、React、Angular 和 Svelte，适用于 PC 和移动端。它提供了亮色和暗色主题，并且具备高灵活性的配置能力，方便开发者构建各类文字编辑应用。

与 CKEditor、TinyMCE 和 Tiptap 等现有编辑器相比，AiEditor 在开源协议、定制化和 AI 功能费用方面有显著优势，还支持通过私人 API Key 对接多种大模型。AiEditor 正在不断演进，已在 Gitee 和 GitHub 上开源。

AiEditor 简介

它是一款为 AI 时代量身打造的富文本编辑器，基于 Web Component 开发，具有极高的兼容性。它支持主流前端框架如 Layui、Vue、React、Angular 和 Svelte，这意味着无论你使用哪个框架，都可以轻松集成 AiEditor。它不仅适用于 PC 端，也兼顾了移动端用户的使用体验，提供亮色和暗色两种主题，满足不同用户的视觉需求。AiEditor 还具备高度灵活的配置能力，允许开发者根据具体需求进行定制，打造出符合特定应用场景的编辑器。

2024-09-01，迭代了一年多的 Vue 3.5 终于发布了，这次发布的代号是 “天元突破 红莲螺岩“。

Reactivity 优化

在 Vue 3.5 中，响应式系统做了重大改进，主要有以下几点：

• 性能更好：系统运行更快。
• 内存使用减少：内存占用减少了 **56%**。
• 行为保持不变：现有功能和使用方式没有改变。
• 解决了旧计算值和内存问题：修复了 SSR 中因悬挂计算导致的内存和旧值问题。
• 数组响应式性能提升： 在一些大型、深度响应的数组性能提升10倍

“悬挂计算”指的是在某些情况下，计算属性（computed properties）或副作用（例如，watchers）被设置为响应式系统中的某个状态或属性的变化，但由于某种原因，计算过程没有正确完成，导致计算结果没有更新，或者存在陈旧的计算值。这种情况下，这些“悬挂”的计算属性可能会占用内存或引发错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="banner">
    <h1 class="title">每日分享一段优质代码片段，欢迎关注与投稿！</h1>
</div>

<style>
.banner {
    height: 230px;
    background-image: url(./img/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 230px;
    line-height: 230px;
    text-align: center;
}
.title {
    margin: 0;
    color: #fff;
    font-size: 50px;
    /* 关键点 */
    mix-blend-mode: difference; 
}
</style>

这段代码展示了如何使用 CSS 和 HTML 创建一个带有背景图片和标题文本的横幅（banner），并且通过 mix-blend-mode: difference; 为标题文本添加混合模式效果。

mix-blend-mode 属性可以为元素设置混合模式，使其颜色与背景颜色混合，从而创建有趣的视觉效果。

这个效果在设计中很常见，能增加页面的视觉吸引力，强调和突出文本内容。

mix-blend-mode: difference;

progress-bar-webpack-plugin

1
2
3
4
5
6
7

const ProgressBarPlugin = require('progress-bar-webpack-plugin')

plugins: [
  new ProgressBarPlugin({
    format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`
  })
]

可以在终端显示出编译的进度和使用的时间，还有百分比进度条，可以分析出每个loader、plugin编译耗时，这样能准确定位出开发环境编译的性能。

speed-measure-webpack-plugin

1
2
3
4
5
6
7
8
9

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')

const smp = new SpeedMeasurePlugin()
const config = {
  ...
}

// 包裹整个配置对象
module.exports = smp.wrap(config)

“锁”经常使用在多进程的语言理和数据库事务的架构当中，现在 Web API 当中也提供了“锁”- Web Locks API。

领域

在浏览器多标签页或 worker 中运行的脚本中获取锁，执行工作时保持锁，最后释放锁。

锁的范围仅限于同一源内

请求锁

PaddleOCR，这是一个由百度开发的开源 OCR（Optical Character Recognition，光学字符识别）工具，它可以用于从图像中识别文本。

PaddleOCR支持多种语言的文本识别，并且能够处理多种场景下的图像。

现在 PaddleOCR 也支持在浏览器中直接运行啦。

FastDeploy 介绍

FastDeploy 是一款全场景、易用灵活、极致高效的AI推理部署工具， 支持云边端部署。

Vitest

Vitest 是 vite 团队推出的下一代测试框架，基于 vite 框架，构建快速高效的单元测试。

Vxe-table

可以说这个表格库应该是你能想到的表格场景这个库里面都有，你没想到场景，这里面估计也有，强烈推荐可以关注一下。

官网地址

VueHooks Plus 中提供了很多高级的功能

• 自动请求/手动请求：参数化配置控制请求自动、手动
• 轮询：轮询模式，定时触发请求
• 防抖：参数化配置，进入防抖模式
• 节流：参数化配置，进入节流模式
• 屏幕聚焦重新请求：在浏览器窗口 refocus 和 revisible 时，会重新发起请求
• 错误重试：通过参数配置指定错误重试次数，useRequest 在失败后会进行重试
• loading delay：延迟 loading 变成 true 的时间，有效防止闪烁
• 缓存：请求成功的数据缓存起来
• SWR(stale-while-revalidate)：如果有缓存数据，我们会优先返回缓存数据，然后在背后发送新请求
• 滚动加载和分页加载：提供滚动加载和分页加载的能力
• 并行请求：赋予 useRequest 并行请求的能力

插件化能力支持

并且 useRequest 还支持外置扩展插件的功能，可以根据自己的需求来自定义插件，目前官方已经提供的插件能力有：

Vue3 的项目，客户那边习惯把同一个项目通过多个浏览 Tab 去打开，这样就能很方便去使用多个页面

这部分相同的逻辑依赖的是同一个接口，同一个处理数据的逻辑，并且这两个过程都很耗时：

• 请求接口：3000ms，因为后端取数据逻辑很复杂，返回数据量很大！
• 数据处理：300ms，前端拿到数据得处理一下

既然都是同一个逻辑，那么能不能将页面一的数据给页面二、页面三、页面四用啊？