前言

最近感觉自己有点颓废，左思右想后觉得不能这样浪费时间，天天来摆烂。受到了群友的激励以及最近自己喜欢看小说。就想我能不能自己也做一款小说阅读器出来呢。在最开始的时候花了一段时间写了一个版本。当时用的是一个开源的接口，当我写好后使用了两天接口挂了我就只有大眼瞪小眼了。之后在 FlutterCandies里面咨询了群友，发现了一种使用外部提供书籍数据源的方法可以避免数据来源挂掉，说干就干vscode启动！

项目地址

github.com/fluttercand…

项目介绍

BITReader是一款基于Flutter实现的小说阅读器

当前功能包含：

• 源搜索：使用内置数据来源进行搜索数据（后续更新：用户可以自行导入来源进行源搜索


• 收藏书架


• 阅读历史记录


• 阅读设置：字号设置，字体颜色更改，自定义阅读背景（支持调色板自定义选择，支持image设置为背景


• 主题设置：支持九种颜色的主题样式


• 书籍详情：展示书籍信息以及章节目录等书籍信息

支持平台

项目截图

mac运行截图

windows运行截图

项目结构

lib

├── main.dart -- 入口

├── assets -- 本地资源生成

├── base -- 请求状态、页面状态

├── db -- 数据缓存

├── icons -- 图标

├── net -- 网络请求、网络状态

├── n_pages

    ├── detail -- 详情页

    ├── home -- 首页

    ├── search -- 全网搜索搜索页

    ├── history -- 历史记录 

    ├── read -- 小说阅读 

    └── like -- 收藏书架

├── pages  已废弃⚠

    ├── home -- 首页

    ├── novel -- 小说阅读

    ├── search -- 全网搜索

    ├── category -- 小说分类

    ├── detail_novel -- 小说详情

    ├── book_novel -- 书架、站源

    └── collect_novel -- 小说收藏

├── route -- 路由

└── theme -- 主题管理

    └── themes -- 主题颜色-9种颜色

├── tools -- 工具类 、解析工具、日志、防抖。。。

└── widget -- 自定义组件、工具 、加载、状态、图片 等。。。。。。

阅读器主要包含的模块

• 阅读显示：文本解析，对文本进行展示处理


• 数据解析： 数据源的解析，以及数据来源的解析（目前只支持简单数据源格式解析、后续可能会更新更多格式解析


• 功能：阅读翻页样式、字号、背景、背景图、切换章节、收藏、历史记录、本地缓存等

阅读显示

阅读文本展示我用的是extended_text因为支持自定义效果很好。

实现的效果把文本中 “ ” 引用起来的文本自定义成我自己想要的效果样式。

class MateText extends SpecialText {

  MateText(

    TextStyle? textStyle,

    SpecialTextGestureTapCallback? onTap, {

    this.showAtBackground = false,

    required this.start,

    required this.color,

  }) : super(flag, '”', textStyle, onTap: onTap);

  static const String flag = '“';

  final int start;

  final Color color;



  /// whether show background for @somebody

  final bool showAtBackground;



  @override

  InlineSpan finishText() {

    final TextStyle textStyle =

        this.textStyle?.copyWith(color: color) ?? const TextStyle();



    final String atText = toString();



    return showAtBackground

        ? BackgroundTextSpan(

            background: Paint()..color = Colors.blue.withOpacity(0.15),

            text: atText,

            actualText: atText,

            start: start,



            ///caret can move int0 special text

            deleteAll: true,

            style: textStyle,

            recognizer: (TapGestureRecognizer()

              ..onTap = () {

                if (onTap != null) {

                  onTap!(atText);

                }

              }))

        : SpecialTextSpan(

            text: atText,

            actualText: atText,

            start: start,

            style: textStyle,

            recognizer: (TapGestureRecognizer()

              ..onTap = () {

                if (onTap != null) {

                  onTap!(atText);

                }

              }));

  }

}

class NovelSpecialTextSpanBuilder extends SpecialTextSpanBuilder {

  NovelSpecialTextSpanBuilder({required this.color});

  Color color;

  set setColor(Color c) => color = c;

  @override

  SpecialText? createSpecialText(String flag,

      {TextStyle? textStyle,

      SpecialTextGestureTapCallback? onTap,

      int? index}) {

    if (flag == '') {

      return null;

    } else if (isStart(flag, AtText.flag)) {

      return AtText(

        textStyle,

        onTap,

        start: index! - (AtText.flag.length - 1),

        color: color,

      );

    } else if (isStart(flag, MateText.flag)) {

      return MateText(

        textStyle,

        onTap,

        start: index! - (MateText.flag.length - 1),

        color: color,

      );

    }

    // index is end index of start flag, so text start index should be index-(flag.length-1)

    return null;

  }

}

数据解析编码格式转换

首先数据是有不同的编码格式，否则我们直接展示可能会导致乱码问题。
先把数据给根据查找到的编码类型来做单独的处理转换。

/// 解析html数据 解码 不同编码

  static String parseHtmlDecode(dynamic htmlData) {

    String resultData = gbk.decode(htmlData);

    final charset = ParseSourceRule.parseCharset(htmlData: resultData) ?? "gbk";

    if (charset.toLowerCase() == "utf-8" || charset.toLowerCase() == "utf8") {

      resultData = utf8.decode(htmlData);

    }

    return resultData;

  }

 static String? parseCharset({

    required String htmlData,

  }) {   

    Document document = parse(htmlData);

  

    List<Element> metaTags = document.getElementsByTagName('meta').toList();

    for (Element meta in metaTags) {

      String? charset = meta.attributes['charset'];

      String content = meta.attributes['content'] ??

          ""; //<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



      if (charset != null) {

        return charset; 

      }

      List<String> parts = content.split(';');

      for (String part in parts) {

        part = part.trim();

        if (part.startsWith('charset=')) {

          return part.split('=').last.trim();

        }

      }

    }



    return null; 

  }

数据结构解析-代码太多只展示部分

Document document = parse(htmlData);



    //

    List<Element> rootNodes = [];

    if (rootSelector != null && rootSelector.isNotEmpty) {

      // 

      List<String> rootParts = rootSelector.split(RegExp(r'[@>]'));

      String initialPart = rootParts[0].trim();



      //

      if (initialPart.startsWith('class.')) {

        String className = initialPart.split('.')[1];

        rootNodes = document.getElementsByClassName(className).toList();

      } else if (initialPart.startsWith('.')) {

        String className = initialPart.substring(1);

        rootNodes = document.getElementsByClassName(className).toList();

      } else if (initialPart.startsWith('#')) {

        String idSelector = initialPart.substring(1);

        rootNodes = document.querySelectorAll('#$idSelector').toList();

      } else if (initialPart.startsWith('id.')) {

        String idSelector = initialPart.split('.')[1];

        var element = document.querySelector('#$idSelector');

        if (element != null) {

          rootNodes.add(element);

        }

      } else if (initialPart.contains(' ')) {

        String idSelector = initialPart.replaceAll(' ', ">");

        var element = document.querySelector(idSelector);

        if (element != null) {

          rootNodes.add(element);

        }

      } else {

        rootNodes = document.getElementsByTagName(initialPart).toList();

      }

存储工具类 - 部分代码

/// shared_preferences

class PreferencesDB {

  PreferencesDB._();

  static final PreferencesDB instance = PreferencesDB._();

  SharedPreferencesAsync? _instance;

  SharedPreferencesAsync get sps => _instance ??= SharedPreferencesAsync();



  /*** APP相关 ***/



  /// 主题外观模式

  ///

  /// system(默认)：跟随系统 light：普通 dark：深色

  static const appThemeDarkMode = 'appThemeDarkMode';



  /// 多主题模式

  ///

  /// default(默认)

  static const appMultipleThemesMode = 'appMultipleThemesMode';



  /// 字体大小

  ///

  ///

  static const fontSize = 'fontSize';



  /// 字体粗细

  static const fontWeight = 'fontWeight';



  /// 设置-主题外观模式

  Future<void> setAppThemeDarkMode(ThemeMode themeMode) async {

    await sps.setString(appThemeDarkMode, themeMode.name);

  }



  /// 获取-主题外观模式

  Future<ThemeMode> getAppThemeDarkMode() async {

    final String themeDarkMode =

        await sps.getString(appThemeDarkMode) ?? 'system';

    return darkThemeMode(themeDarkMode);

  }



  /// 设置-多主题模式

  Future<void> setMultipleThemesMode(String value) async {

    await sps.setString(appMultipleThemesMode, value);

  }



  /// 获取-多主题模式

  Future<String> getMultipleThemesMode() async {

    return await sps.getString(appMultipleThemesMode) ?? 'default';

  }



  /// 获取-fontsize 大小 默认18

  Future<double> getNovelFontSize() async {

    return await sps.getDouble(fontSize) ?? 18;

  }



  /// 设置 -fontsize 大小

  Future<void> setNovelFontSize(double size) async {

    await sps.setDouble(fontSize, size);

  }



  /// 设置-多主题模式

  Future<void> setNovelFontWeight(NovelReadFontWeightEnum value) async {

    await sps.setString(fontWeight, value.id);

  }



  /// 获取-多主题模式

  Future<String> getNovelFontWeight() async {

    return await sps.getString(fontWeight) ?? 'w300';

  }

}

最后

特别鸣谢FlutterCandies糖果社区，也欢迎加入我们的大家庭。让我们一起学习共同进步

免责声明：本项目提供的源代码仅用学习，请勿用于商业盈利。

用 Cursor 做 UI，有两种最简单又有效的方法，一个免费一个付费，不管你要做网页 UI 还是应用程序 UI，都能用。

我这里不推荐直接用 Cursor 自带模型生成 UI，模型生成出来的效果比较差，就算是最强的 Claude 也不太行。

本文我分享的方法是我最近学到的，先说免费的。当我们手头有一张 UI 图片时，不要直接丢给 Cursor，而是先用 Google 的 Gemini 模型、Claude 或者 ChatGPT，这里我用的是 Gemini 并打开 Canvas 功能。

我把 UI 图片放到 Gemini 中，然后让它根据 UI 截图生成一份 JSON 格式的设计规范文件。

提示词参考：

Create a JSON-formatted design system profile. This profile should extract relevant visualdesign information from the provided screenshots. The JSON output must specifically include:

The overarching design style (e.g., color palette, typography, spacing, visual hierarchy).The structural elements and layout principles.Any other attributes crucial for an Al to consistently replicate these design systems.Crucially, do not include the specific content or data present within the images, focusing solely

生成出来的 JSON 包含整体设计风格、结构元素、布局原则，以及一些关键属性。

接着把这份 JSON 文件复制到 Cursor 中，让 Cursor 根据这份 JSON 来生成代码。

提示词参考：

参考 @design.json 设计规范，根据图片中的样式，生成一个网页。

生成效果如下：

对比一下如果直接用 Cursor 根据截图生成代码，不用 JSON 文件。

提示词：

按照图片中的UI样式，创建一个新的页面。注意：尽可能按照图片中的样子创建!!!

效果如下：

可以看到，效果差了很多，我原型 UI 的截图如下：

这是我随便找的一张图片作为例子，可以明显看出，先提取一份 JSON 文件，然后再让 Cursor 生成代码，效果要好很多。

为什么这种先提取 JSON 文件再生成代码的方法很有效？因为当任务涉及精确、结构化、无歧义的数据时，JSON 让模型理解更清晰，处理更高效，生成的结果也更稳定。

以上就是免费的方法。

接下来是付费的方法。

如果你对 UI 要求比较高，比如需要反复修改，那我推荐直接用 v0 API。v0 模型是 Vercel 推出的，专门针对 UI 和前端开发优化，所以在处理这类任务时，v0 比 Claude、Gemini、ChatGPT 都更强。

我一般会在需要大量生成 UI 时订阅 v0，一个月 20 美金，这个月把需要的 UI 全部生成完，然后就可以退订。

订阅后去后台生成 API Key，然后在 Cursor 中调用 v0 模型即可。

在 Cursor 模型设置中，把 v0 的 API Key 填进去，v0 模型是符合 OpenAI API 规范的，所以直接选择 OpenAI 模型即可。

实际使用时，你在对话中用的是 OpenAI 模型，但后台用的其实是 v0 模型。

好了，这就是免费和付费的两种方法。

最后再推荐两个动画工具：Framer Motion 和 React Bits，也都是很棒的选择。

你可以把 React Bits 中动画代码直接粘贴到 Cursor 中，让模型帮你集成即可。

• React：相当于项目经理和架构师


• Radix UI：相当于功能工程师


• Tailwind CSS：相当于视觉设计师


• Framer Motion：相当于动效设计师

以上就是一套现代强大 UI 开发工具箱，大家可以根据需要组合使用！

这两天啊，各地高考的成绩终于是陆续公布了。

现在，也是时候揭晓全球第一梯队的大模型们的 “高考成绩” 了——

我们先来看下整体的情况（该测试由字节跳动 Seed 团队官方发布）：

按照传统文理分科计分方式，Gemini 的理科总成绩 655 分，在所有选手里排名第一。豆包的文科总成绩 683 分，排名第一，理科总成绩是 648 分，排名第二。

再来看下各个细分科目的成绩情况：

除了数学、化学和生物之外，豆包的成绩依旧是名列前茅，6 个科目均是第一。

不过其它 AI 选手的表现也是比较不错，可以说是达到了优秀学生的水准。

比较遗憾的选手就要属 O3，因为它在语文写作上跑了题，因此语文成绩仅 95 分，拉低了整体的分数。

若是从填报志愿角度来看，因为这套测试采用的是山东省的试卷，根据过往经验判断，3 门自选科目的赋分相比原始分会有一定程度的提高，尤其是在化学、物理等难度较大的科目上。本次除化学成绩相对稍低外，豆包的其余科目组合的赋分成绩最高能超过 690 分，有望冲刺清华、北大。

（赋分规则：将考生选考科目的原始成绩按照一定比例划分等级，然后将等级转换为等级分计入高考总分）

好，那现在的豆包面临的抉择是：上清华还是上北大？

大模型参加高考，分数怎么判？

在看完成绩之后，或许很多小伙伴都有疑惑，这个评测成绩到底是怎么来的。

别急，我们这就对评测标准逐条解析。

首先在卷子的选择上，由于目前网络流出的高考真题都是非官方的，而山东是少数传出全套考卷的高考大省；因此主科（即语文、数学、英语）采用的是今年的全国一卷，副科采用的则是山东卷，满分共计 750 分。

其次在评测方式上，都是通过 API 测试，不会联网查询，评分过程也是参考高考判卷方式，就是为了检验模型自身的泛化能力：

• 选择题、填空题
  
  

  采用机评（自动评估）加人工质检的方式；



• 开放题
  
  

  实行双评制，由两位具有联考阅卷经验的重点高中教师匿名评阅，并设置多轮质检环节。

在给模型打分的时候，采用的是 “3 门主科（语文数学英语）+3 门综合科（理综或文综）” 的总分计算方式，给五个模型排了个名次。

值得一提的是，整个评测过程中，模型们并没有用任何提示词优化技巧来提高模型的表现，例如要求某个模型回答得更详细一些，或者刻意说明是高考等等。

最后，就是在这样一个公平公正的环境之下，从刚才我们展示的结果来看，Gemini、豆包相对其他 AI 来说取得了较优的成绩。

细分科目表现分析

了解完评测标准之后，我们继续深入解读一下 AI 选手们在各个科目上的表现。

由于深度思考的大火，大模型们在数学这样强推理科目上的能力明显要比去年好很多（此前大部分均不及格），基本上都能达到 140 分的成绩。

不过在一道不算难的单选题（全国一卷第 6 题）上，国内外的大模型们却都栽了跟头：

这道题大模型们给出的答案是这样的：

豆包：C；Gemini：B；Claude：C；O3：C；DeepSeek：C。

但这道题的正解应该是 A，因此大模型们在此全军覆没。

之所如此，主要是因为题目里有方框、虚线、箭头和汉字混在一起的图，模型认不准图像，说明它们在 “看图说话” 这块还有进步空间。

以及在更难的压轴大题上，很多大模型也没完全拿下，经常漏写证明过程，或者推导不严谨被扣分，说明在细节上还需加强。

到做语文选择题和阅读题这两个版块，大模型们几乎是 “学霸本霸”，得分率超高。

不过在作文写作过程也暴露出了一些问题，例如写作过于刻板、文字冰冷，文章字数不达标（不足 800 字或超过 1200 字）、立意不对，形式上还经常会出现惯用的小标题。

在英语测试过程中，大模型们几乎挑不出毛病，唯一扣分点是在写作上，比如用词不够精准、句式稍显单调，但整体已经很接近完美。

对于理综，遇到带图的题目大模型们还是会犯难，不过豆包和 Gemini 这俩模型在看图像和理解图的能力上会比其他模型强一些。

例如下面这道题中，正确答案应当是 C，大模型们的作答是这样的：

豆包：C；Gemini：C；Claude：D；O3：D；DeepSeek：D。

最后在文综方面，大模型的地域差别就显现得比较明显，国外的大模型做政治、历史题时，经常搞不懂题目在考啥，对中国的知识点不太 “感冒”。

而对于地理题，最头疼的便是分析统计图和地形图，得从图里精准提取信息再分析。

以上就是对于本次评测的全面分析了。

除了今年国内的高考之外，这几位 “参赛选手” 还参加了印度理工学院的第二阶段入学考试——JEE Advanced。

这场考试每年有数百万人参与第一阶段考试，其中前 25 万考生可晋级第二阶段。它分为两场，每场时长 3 小时，同时对数学、物理、化学三科进行考察。

题目以图片形式呈现，重点考查模型的多模态处理能力与推理泛化能力。所有题目均为客观题，每道题进行 5 次采样，并严格按照 JEE 考试规则评分——答对得分、答错扣分，不涉及格式评分标准。

与全印度人类考生成绩对比显示，第一名得分 332 分，第十名得分 317 分。

值得注意的是，豆包与 Gemini 已具备进入全印度前 10 的实力：Gemini 在物理和化学科目中表现突出，而豆包在数学科目 5 次采样中实现全对。

怎么做到的？

相比去年一本线上下的水平，整体来看，大模型们在今年高考题上的表现均有明显的进步。

那么它们到底是如何提升能力的？我们不妨以拿下单科第一最多的豆包为例来了解一下。

豆包大模型 1.6 系列，是字节跳动 Seed 团队推出的兼具多模态能力与深度推理的新一代通用模型。

团队让它能力提升的技术亮点，我们可以归结为三招。

第一招：多模态融合与 256K 长上下文能力构建

Seed1.6 延续了 Seed1.5 在稀疏 MoE（混合专家模型）领域的技术积累，采用 23B 激活参数与 230B 总参数规模进行预训练。其预训练过程通过三个阶段实现多模态能力融合与长上下文支持：

• 第一阶段：纯文本预训练
  
  以网页、书籍、论文、代码等数据为训练基础，通过规则与模型结合的数据清洗、过滤、去重及采样策略，提升数据质量与知识密度。


• 第二阶段：多模态混合持续训练（MMCT）
  
  进一步强化文本数据的知识与推理密度，增加学科、代码、推理类数据占比，同时引入视觉模态数据，与高质量文本混合训练。


• 第三阶段：长上下文持续训练（LongCT）
  
  通过不同长度的长文数据逐步扩展模型序列长度，将最大支持长度从 32K 提升至 256K。

通过模型架构、训练算法及 Infra 的持续优化，Seed1.6 base 模型在参数量规模接近的情况下，性能较 Seed1.5 base 实现显著提升，为后续后训练工作奠定基础。

这一招的发力，就对诸如高考语文阅读理解、英语完形填空和理科综合应用题等的作答上起到了提高准确率的作用，因为它们往往涉及长文本且看重上下文理解。

第二招：多模态融合的深度思考能力

Seed1.6-Thinking 延续 Seed1.5-Thinking 的多阶段 RFT（强化反馈训练）与 RL（强化学习）迭代优化方法，每轮 RL 以上一轮 RFT 为起点，通过多维度奖励模型筛选最优回答。相较于前代，其升级点包括：

• 拓展训练算力，扩大高质量数据规模（涵盖 Math、Code、Puzzle 等领域）；


• 提升复杂问题的思考长度，深度融合 VLM 能力，赋予模型清晰的视觉理解能力；


• 引入 parallel decoding 技术，无需额外训练即可扩展模型能力 —— 例如在高难度测试集 Beyond AIME 中，推理成绩提升 8 分，代码任务表现也显著优化。

这种能力直接对应高考中涉及图表、公式的题目，如数学几何证明、物理电路图分析、地理等高线判读等；可以快速定位关键参数并推导出解题路径，避免因单一模态信息缺失导致的误判。

第三招：AutoCoT 解决过度思考问题

深度思考依赖 Long CoT（长思维链）增强推理能力，但易导致 “过度思考”—— 生成大量无效 token，增加推理负担。

为此，Seed1.6-AutoCoT 提出 “动态思考能力”，提供全思考、不思考、自适应思考三种模式，并通过 RL 训练中引入新奖励函数（惩罚过度思考、奖励恰当思考），实现 CoT 长度的动态压缩。

在实际测试中：

• 中等难度任务（如 MMLU、MMLU pro）中，CoT 触发率与任务难度正相关（MMLU 触发率 37%，MMLU pro 触发率 70%）；


• 复杂任务（如 AIME）中，CoT 触发率达 100%，效果与 Seed1.6-FullCoT 相当，验证了自适应思考对 Long CoT 推理优势的保留。

以上就是豆包能够在今年高考全科目评测中脱颖而出的原因了。

不过除此之外，还有一些影响因素值得说道说道。

正如我们刚才提到的，化学和生物的题目中读图题占比较大，但因非官方发布的图片清晰度不足，会导致多数大模型的表现不佳；不过 Gemini2.5-Pro-0605 的多模态能力较突出，尤其在化学领域。

不过最近，字节 Seed 团队在使用了更清晰的高考真题图片后，以图文结合的方式重新测试了对图片理解要求较高的生物和化学科目，结果显示 Seed1.6-Thinking 的总分提升了近 30 分（理科总分达 676）。

这说明，全模态推理（结合文本与图像）能显著释放模型潜力，是未来值得深入探索的方向。

那么你对于这次大模型们的 battle 结果有何看法？欢迎大家拿真题去实测后，在评论区留言你的感受~

评分明细详情：

bytedance.sg.larkoffice.com/sheets/QgoF…

欢迎在评论区留下你的想法！

— 完 —

NextTick

等待下一次 DOM 更新刷新的工具方法。

cn.vuejs.org/api/general…

<https://cn.vuejs.org/api/general.html#nexttick>

从字面上看 就知道 肯定是个 异步的嘛。

然后面试官 那你来说说 js执行过程吧。 宏任务 微任务 来做做 宏任务 微任务输出的结果的题吧。

再然后 问问你 nextTick 既然几个异步的 那么他是 宏任务 还是个 微任务呀。

vue2 中

文件夹 src/core/util/next-tick.js 中

promise --> mutationObserver -> setImmediate -> setTimeout

支持 哪个走哪个

vue3 中

好吧 好吧 promise 了嘛

全程 promise

大家好，我是农村程序员，独立开发者，行业观察员，前端之虎陈随易。

我会在这里分享关于 独立开发、编程技术、思考感悟 等内容，欢迎关注。

• 个人网站 1️⃣：chensuiyi.me


• 个人网站 2️⃣：me.yicode.tech


• 技术群，搞钱群，闲聊群，自驾群，想入群的在我个人网站联系我。

如果你觉得本文有用，一键三连 (点赞、评论、转发)，就是对我最大的支持~

网上冲浪看到一个有趣且违背常识的帖子，用了那么多年的 localhost，没想到 localhost 还能设置子域名。

而且还不需要修改 hosts 文件，直接就能使用，这真是离谱他妈给离谱开门，离谱到家了。

先说说应用场景：

• 多用户/多会话隔离：在本地开发中模拟不同用户的 cookies 和 session storage，适合测试用户认证或个性化功能。


• 跨域开发与测试：模拟真实多域环境 (如 API 和前端分离)，用于调试 CORS、单点登录或微服务架构。


• 简化开发流程：无需修改 hosts 文件即可快速创建子域名，适合快速原型设计或临时项目。


• 工具与服务器集成：与本地开发工具 (如 localias) 结合，支持 HTTPS 和自定义端口，增强开发体验。


• 灵活调试：通过自定义子域名和 IP (如 127.0.0.42) 进行高级调试或模拟复杂网络配置。

总得来说就是，localhsot 支持子域名比我们自己手动配置不同的域名并设置 hosts 文件方便多了。

接下来给大家实测一下。

请看，这是我直接在浏览器输入 test1.localhost:3020 后，就能请求到我本地启动的监听 3020 端口的后端接口返回的数据。

我没有配置 hosts 文件，没有做过任何多余的配置工作，直接就生效了。

那么我们可以直接在本地就能调试多服务器集群，跨域 cookie 共享，SSO 单点登录，微服务架构等功能，非常方便。

另外，本公众号是 前端之虎陈随易 专门分享技术的公众号，目前关注量不多，希望大家点点小手指，来个大大的关注哦~

前言

Vue3.5在2024-09-03正式上线，目前在Vue官网显最新版本已经是Vue3.5，其中主要包含了几个小改动，我留意到日常最常用的改动就是props了，肯定是用Vue3的人必用的，所以针对性说一下props的两个小改动使我们日常使用更加灵活。

一、带响应式Props解构赋值

简述： 以前我们对Props直接进行解构赋值是会失去响应式的，需要配合使用toRefs或者toRef解构才会有响应式，那么就多了toRefs或者toRef这工序，而最新Vue3.5版本已经不需要了。

这样直接解构，testCount能直接渲染显示，但会失去响应式，当我们修改testCount时页面不更新。

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const props = defineProps({

    testCount: {

      type: Number,

      default: 0,

    },

  });



  const { testCount } = props;

</script>

保留响应式的老写法，使用toRefs或者toRef解构

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps, toRef, toRefs } from 'vue';

  const props = defineProps({

    testCount: {

      type: Number,

      default: 0,

    },

  });



  const { testCount } = toRefs(props);

  // 或者

  const testCount = toRef(props, 'testCount');

</script>

最新Vue3.5写法，不借助”外力“直接解构，依然保持响应式

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const { testCount } = defineProps({

    testCount: {

      type: Number,

    },

  });



</script>

相比以前简洁了真的太多，直接解构使用省去了toRefs或者toRef

二、Props默认值新写法

简述： 以前默认值都是用default: ***去设置，现在不用了，现在只需要解构的时候直接设置默认值，不需要额外处理。

先看看旧的default: ***默认值写法

如下第12就是旧写法，其它以前Vue2也是这样设置默认值

<template>

  <div>

    {{ props.testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const props = defineProps({

    testCount: {

      type: Number,

      default: 1

    },

  });

</script>

最新优化的写法
如下第9行，解构的时候直接一步到位设置默认值，更接近js语法的写法。

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const { testCount=18 } = defineProps({

    testCount: {

      type: Number,

    },

  });

</script>

小结

这次更新其实props的本质功能并没有改变，但写法确实变的更加丝滑好用了，props使用非常高频感觉还是有必要跟进这种更简洁的写法。如果那里写的不对或者有更好建议欢迎大佬指点啊。

引言

最近我的小册《油猴脚本实战指南》上线了，很多同学都很感兴趣。

有些人学习后就私下问我，油猴既然能将任意前端js注入到当前网页中，是否能结合手势识别实现任意网页隔空控制，实现类似手机上的隔空翻页功能呢？

这是个非常好的想法，于是，我经过研究，将它实现出来了！先看看脚本效果：

1️⃣ 上下翻页功能

• 左手张开，右手可以控制网页向下翻页


• 左手握拳，右手可以控制网页向上翻页

2️⃣ 右手可以控制一个模拟光标移动

3️⃣ 右手握拳，实现点击效果

当然，还预设了很多手势，比如双手比✌🏻关闭当前网页，左手竖起大拇指，右手实现缩放网页等效果。

实现原理

其实实现原理非常简单，就是油猴+手势识别

油猴Tampermonkey

油猴（Tampermonkey）是一款浏览器插件，允许用户在网页加载时注入自定义的 JavaScript 脚本，来增强、修改或自动化网页行为。

通俗地说，借助油猴，你可以将自己的 JavaScript 代码“植入”任意网页，实现自动登录、抢单、签到、数据爬取、广告屏蔽等各种“开挂级”功能，彻底掌控页面行为。

如果你想深入了解，可以参考文章：juejin.cn/book/751468…

手势识别MediaPipe

手势识别其实已经不是一个新鲜词了，随着大模型的普及，AI识别手势非常简单方便。本示例中使用的AI模型识别，主要依赖了谷歌的MediaPipe。

MediaPipe 解决方案提供了一套库和工具，可帮助您快速在应用中应用人工智能 (AI) 和机器学习 (ML) 技术。

本示例中的demo就是借助它的手势识别能力实现的。在web中，我们可以借助MediaPipe @mediapipe/tasks-vision NPM 软件包获取手势识别器代码。

MediaPipe @mediapipe/tasks-vision

它的使用也非常简单

// Create task for image file processing:

const vision = await FilesetResolver.forVisionTasks(

  // path/to/wasm/root

  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "

);

const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {

  baseOptions: {

    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"

  },

  numHands: 2

});

如何将两者结合

借助油猴的脚本注入能力，我们能让我们的手势识别代码运行在任意网页，从而轻松实现隔空手势控制效果。

当然，脚本运行时必须开启摄像机权限，页面其实会有一个画面，但是很尴尬，于是实际脚本中，我将画面隐藏了。

手势识别的原理其实也不复杂，通过tasks-vision，我们可以拿到上图中各个关键的点的位置信息，通过判断不同点位之间的距离，实现不同的手势判断。

// 判定手势

// 手掌张开手势

function isHandOpen(hand) {

  const fingers = [[8, 5], [12, 9], [16, 13], [20, 17]];

  return fingers.filter(([tip, base]) => dist(hand[tip], hand[base]) > 0.1).length >= 4;

}

// 握拳手势

function isFist(hand) {

  const fingers = [[8, 5], [12, 9], [16, 13], [20, 17]];

  return fingers.filter(([tip, base]) => dist(hand[tip], hand[base]) < 0.06).length >= 3;

}

// 胜利手势

function isVictory(hand) {

  const extended = [8, 12];

  const folded = [16, 20];

  return (

    extended.every((i) => dist(hand[i], hand[i - 3]) > 0.1) &&

    folded.every((i) => dist(hand[i], hand[i - 3]) < 0.05)

  );

}

上述代码中的hand就是mediapipe/tasks-vision返回的手势信息。结合这些自定义的手势信息，我们就能实现各种花里胡哨的功能！

进一步学习

对于手势识别的学习，我们可以去学习官方的demo，在npmjs上，我们可以找到使用说明

这个包人脸识别、手势识别等非常多的功能，非常强大！

如果你对油猴脚本感兴趣，可以看看教程 《 油猴脚本实战指南 》， 本示例中的demo也会在这个教程中详细讲解。

当然，你也可以加我shc1139874527，我会拉你进学习交流群，一起体验油猴脚本开发的魅力！

AI 端模型与前端开发的新时代

随着技术的发展，人工智能（AI）正以前所未有的速度融入我们的生活。从前端到后端，从移动应用到物联网设备，AI的应用场景越来越广泛。特别是在前端领域，AI技术的引入为网页开发带来了前所未有的机遇。

什么是脑神经网络库（Brain.js）

在前端领域，Brain.js 是一个非常受欢迎的库，它允许开发者在浏览器中直接使用神经网络进行各种任务，如文本分类、图像识别等。Brain.js 的一大优势在于其易于上手，即使是没有深厚机器学习背景的开发者也能快速开始使用。

Brain.js 在前端开发中的应用

数据准备

首先，我们需要准备用于训练神经网络的数据。这些数据通常以JSON数组的形式存在，每个元素包含输入（input）和输出（output）。例如，在以下示例中，我们准备了一组关于前端和后端开发的知识点，用于训练一个能够区分两者差异的神经网络。

const data = [

  { "input": "implementing a caching mechanism improves performance", "output": "backend" },

  // 更多数据...

];

神经网络初始化

接下来，我们使用 brain.recurrent.LSTM() 函数初始化一个长短期记忆（LSTM）神经网络。LSTM是一种特殊的递归神经网络（RNN），特别适合处理序列数据，如文本或时间序列。

const network = new brain.recurrent.LSTM();

模型训练

有了数据和神经网络之后，我们就可以开始训练模型了。训练过程可能需要一些时间，具体取决于数据集的大小和复杂度。network.train() 方法接受数据集作为参数，并允许设置训练的迭代次数和其他选项。

network.train(data, {

  iterations: 2000, // 迭代次数

  log: true,       // 是否打印训练日志

  logPeriod: 100   // 日志打印频率

});

应用模型

一旦模型训练完成，我们就可以使用 network.run() 方法对新的输入进行预测。例如，我们可以测试模型是否能正确地将“使用Flexbox布局”归类为前端开发。

const output = network.run("using flexbox for layout");

console.log(output); // 输出结果

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>AI 端模型- 前端开发的时代</title>

</head>

<body>

<script src="./brain.js"></script>

<script>

// json 数组  

// 输入  input

// 喂给大模型的数据 

const data = [

  { "input": "implementing a caching mechanism improves performance", "output": "backend" },

  { "input": "hover effects on buttons", "output": "frontend" },

  { "input": "optimizing SQL queries", "output": "backend" },

  { "input": "using flexbox for layout", "output": "frontend" },

  { "input": "setting up a CI/CD pipeline", "output": "backend" },

  { "input": "SVG animations for interactive graphics", "output": "frontend" },

  { "input": "authentication using OAuth", "output": "backend" },

  { "input": "responsive images for different screen sizes", "output": "frontend" },

  { "input": "creating REST API endpoints", "output": "backend" },

  { "input": "CSS grid for complex layouts", "output": "frontend" },

  { "input": "database normalization for efficiency", "output": "backend" },

  { "input": "custom form validation", "output": "frontend" },

  { "input": "implementing web sockets for real-time communication", "output": "backend" },

  { "input": "parallax scrolling effect", "output": "frontend" },

  { "input": "securely storing user passwords", "output": "backend" },

  { "input": "creating a theme switcher (dark/light mode)", "output": "frontend" },

  { "input": "load balancing for high traffic", "output": "backend" },

  { "input": "accessibility features for disabled users", "output": "frontend" },

  { "input": "scalable architecture for growing user base", "output": "backend" }

];

// 初始化一个神经网络

const network = new brain.recurrent.LSTM();

// 训练 花蛮长时间

network.train(data,{

  iterations: 2000,

  log:true,

  logPeriod:100

});

// 执行一下

 const output = network.run("using flexbox for layout");

console.log(output);

</script>

</body>

</html>

前端与AI融合的未来

随着技术的进步，AI在前端的应用将更加广泛。从智能表单验证到个性化推荐系统，从前端性能优化到用户界面的自动设计，AI技术为前端开发提供了无限的可能性。此外，随着端侧模型（如AGI端侧模型）的发展，未来的设备将变得更加智能，能够即时响应用户的需要，提供更加个性化的体验。

最后，AI与前端开发的结合不仅提升了用户体验，也为开发者带来了新的挑战和机遇。通过不断学习和探索，我们能够在这个充满活力的领域中创造出更多令人兴奋的作品。

大家好，我卡颂，专注于AI助力程序员转型（阅读我的更多思考）

最近DeepSeek R1爆火。有多火呢？连我爷爷都用上了，还研究起提示词工程来了。

大模型不断发展对我们前端工程师有什么长远影响呢？本文聊聊25年前端会有的一个小趋势。

模型进步的影响

像DeepSeek R1这样的推理模型和一般语言模型（类似Claude Sonnet、GPT-4o、DeepSeek-V3）有什么区别呢？

简单来说，推理模型的特点是：推理能力强，但速度慢、消耗高。

他比较适合的场景比如：

• Meta Prompting（让推理模型生成或修改给一般语言模型用的提示词）


• 路径规划

等等

这些应用场景主要利好AI Agent。

再加上一般语言模型在生成效果、token上下文长度上持续提升。可以预见，类似Cursor Composer Agent这样的AI Agent在25年能力会持续提升，直到成为开发标配。

这会给前端工程师带来什么进一步影响呢？

一种抽象的理解

我们可以将AI Agent抽象得理解为应用压缩算法，什么意思呢？

以Cursor Composer Agent举例：

我们传入：

• 描述应用状态的提示词


• 描述应用结构的应用截图

AI Agent帮我们生成应用代码。

同样，也能反过来，让AI Agent根据应用代码帮我们生成描述应用的提示词。

从左到右可以看作是解压算法，从右往左可以看作是压缩算法。

就像图片的压缩算法存在失真，基于AI Agent抽象的应用压缩算法也存在失真，也就是生成的效果不理想。

随着上文提到的AI Agent能力提高（背后是模型能力提高、工程化的完善），应用压缩算法的失真率会越来越低。

这会带来什么进一步的影响呢？

对开发的影响

如果提示词（经过AI Agent）就能准确表达想要的代码效果，那会有越来越多原本需要用代码表达的东西被用提示词表达。

比如，21st.dev的组件不是通过npm，而是通过提示词引入。

相当于将引入组件的流程从：开发者 -> 代码

变成了：开发者 -> 提示词 -> AI Agent -> 代码

再比如，CopyCoder是一款上传应用截图，自动生成应用提示词的应用。

当你上传应用截图后，他会为你生成多个提示词文件。

其中.setup描述AI Agent需要执行的步骤，其他文件是描述应用实现细节的结构化提示词

这个过程相当于根据应用截图，将应用压缩为提示词。

很自然的，反过来我们就能用AI Agent将这段提示词重新解压为应用代码。

这个过程在25年会越来越丝滑。

这会造成的进一步影响是：越来越多前端开发场景会被提炼为标准化的提示词，比如：

• 后台管理系统


• 官网


• 活动页

前端开发的日常编码工作会越来越多被上述流程取代。

你可能会说，当前AI生成的代码效果还不是很好。

但请注意，我们谈的是趋势。当你日复一日做着同样的业务时，你的硅基对手正在每年大跨步进步。

总结

随着基础模型能力提高，以及工程化完善，AI Agent在25年会逐渐成为开发标配。

作为应用开发者（而不是算法工程师），我们可以将AI Agent抽象得理解为应用压缩算法。

随着时间推移，这套压缩算法的失真率会越来越低。

届时，会有越来越多原本需要用代码表达的东西被用提示词表达。

这对前端工程师来说，既是机遇也是挑战。

你可能想不到，只用两行 CSS，就能让你的卡片、图片、内容块自动适应各种屏幕宽度，彻底摆脱复杂的媒体查询！
秘诀就是 CSS Grid 的 auto-fill 和 auto-fit。

马上教你用！✨

🧩 基础概念

假设你有这样一个需求：

• 一排展示很多卡片


• 每个卡片最小宽度 200px，剩余空间平均分配


• 屏幕变窄时自动换行

只需在父元素加两行 CSS 就能实现：

/* 父元素 */

.grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}



/* 子元素 */

.item {

  height: 200px;

  background-color: rgb(141, 141, 255);

  border-radius: 10px;

}

下面详细解释这行代码的意思：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

这是 CSS Grid 布局里定义列宽的常用写法，逐个拆解如下：

1. grid-template-columns

• 作用：定义网格容器里有多少列，以及每列的宽度。

2. repeat(auto-fit, ...)

• repeat 是个重复函数，表示后面的模式会被重复多次。


• auto-fit 是一个特殊值，意思是：自动根据容器宽度，能放下几个就放几个，每列都用后面的规则。
  
  
  
  • 容器宽度足够时，能多放就多放，放不下就自动换行。
  
  
  
  

3. minmax(200px, 1fr)

• minmax 也是一个函数，意思是：每列最小200px，最大可以占1fr（剩余空间的平分）


• 具体来说：
  
  
  
  • 当屏幕宽度很窄时，每列最小宽度是200px，再窄就会换行。
  
  
  • 当屏幕宽度变宽，卡片会自动拉伸，每列最大可以占据剩余空间的等分（1fr），让内容填满整行。
  
  
  
  

4. 综合起来

• 这行代码的意思就是：
  
  
  
  • 网格会自动生成多列，每列最小200px，最大可以平分一行的剩余空间。
  
  
  • 屏幕宽了就多显示几列，屏幕窄了就少显示几列，自动换行，自适应各种屏幕！
  
  
  • 不需要媒体查询，布局就能灵活响应。
  
  
  
  

总结一句话：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

让你的网格卡片最小200px，最大自动填满一行，自动适应任何屏幕，布局永远美观！

这里还能填 auto-fill，和 auto-fit 有啥区别？

🥇 auto-fill 和 auto-fit 有啥区别？

1. auto-fill

🧱 尽可能多地填充列，即使没有内容也会“占位”

• 会自动创建尽可能多的列轨道（包括空轨道），让网格尽量填满容器。


• 适合需要“列对齐”或“固定网格数”的场景。

2. auto-fit

🧱 自动适应内容，能合并多余空列，不占位

• 会自动“折叠”没有内容的轨道，让现有的内容尽量拉伸占满空间。


• 适合希望内容自适应填满整行的场景。

👀 直观对比

假设容器宽度能容纳 10 个 200px 的卡片，但你只放了 5 个卡片：

• auto-fill 会保留 10 列宽度，5 个卡片在前五列，后面五列是“空轨道”。


• auto-fit 会折叠掉后面五列，让这 5 个卡片拉伸填满整行。

👇 Demo 代码：

<h2>auto-fill</h2>

<div class="grid-fill">

    <div>item1</div>

    <div>item2</div>

    <div>item3</div>

    <div>item4</div>

    <div>item5</div>

</div>



<h2>auto-fit</h2>

<div class="grid-fit">

    <div>item1</div>

    <div>item2</div>

    <div>item3</div>

    <div>item4</div>

    <div>item5</div>

</div>

.grid-fill {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 16px;

  margin-bottom: 40px;

}

.grid-fit {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 16px;

}

.grid-fill div {

  background: #08f700;

}

.grid-fit div {

  background: #f7b500;

}

.grid-fill div,

.grid-fit div {

  padding: 24px;

  font-size: 18px;

  border-radius: 8px;

  text-align: center;

}

兼容性

caniuse.com/?search=aut…

🎯 什么时候用 auto-fill，什么时候用 auto-fit？

• 希望每行“有多少内容就撑多宽”，用 auto-fit
  
  适合卡片式布局、相册、响应式按钮等。


• 希望“固定列数/有占位”，用 auto-fill
  
  比如表格、日历，或者你希望网格始终对齐，即使内容不满。

📝 总结

🌟 小结

• auto-fill 更像“占位”，auto-fit 更像“自适应”


• 推荐大部分响应式卡片用 auto-fit


• 善用 minmax 配合，让列宽自适应得更自然

只需两行代码，你的页面就能优雅适配各种屏幕！

觉得有用就点赞收藏吧，更多前端干货持续更新中！🚀✨

最近跟同事闲聊，大家都在吐槽一个问题：
！
App 是越做越像平台了，但开发却越做越痛苦了。

你想加个活动页，产品说今晚上线；

你想做个业务扩展，运营说要不你再写个低代码工具；

你想适配鸿蒙，领导说最好做个 React Native 得了；

同事活成了“加班工具人”，App 也做成了臃肿的 “功能集成器”。

难道开发一个通用的 App ，就非得这么累吗？

于是，我们试着去找更轻、更灵活的解决方案。

我们只是想做一个“活动页托管方案”，不想每次上线都发版，更不想因为临时需求牵扯整个开发团队。

但随着调研的深入，我们发现这种痛点其实根本不是“活动页”本身，而是：App 缺乏一个**“包容性很强的容器”**。

比如：

• 新功能不用频繁发版；


• 能复用现有页面或者组件；


• 可以独立上线，不干扰主应用。

我们对比了几个方向：

• WebView + H5：快是快，但弱得可怕，尤其是 JSBridge 管理地狱，体验不佳；


• 低代码平台：适合特定场景，但定制性不足，复杂页面性能堪忧；


• RN/Flutter 微模块化：维护成本太高，涉及太多客户端改动。

直到我在调研中遇到了 FinClip，才意识到这事完全可以换个方式。

让人眼前一亮的 FinClip

FinClip 是什么？

一句话说完：把小程序能力，通用化、标准化，塞进任何 App。

从技术架构来说，FinClip 提供的是一个极其轻量的小程序容器 SDK（3MB都不到），可以直接嵌进你的 iOS、Android、HarmonyOS App，甚至 React Native、Flutter、macOS、车机都能跑。

开发者只要写一套小程序代码，放进去就能运行。不用重新适配底层系统，也不用改框架结构。

而且它兼容微信/支付宝/抖音小程序语法，意味着你过去写的项目，可能几乎零改动就能跑起来。

于是，我们立刻拉了群，软磨硬泡，搞来了二组同事开发的活动页项目，

需要的同学请戳这里：github.com/FernAbby/H5…

然后通过 FinClip Studio 打包上传，再嵌入 App。

FinClip Studio，真的有点香

讲真，刚开始用 FinClip Studio，我也做好了“将就一下”的心理准备。

结果没想到是真香警告。

首先，新建项目一键生成模板，跟微信小程序开发工具 99% 像；

你也可以和我一样选择导入已有的项目，

其次，模拟器支持多终端调试，拖拉缩放，全程无需真机；

另外，发布打包一条龙服务，你只需要上传至云端后台：

输入相关上传信息：

等待上传成功即可！

后台是平台运营的“指挥中心”

接下来的重头戏，需要我们登陆后台系统，

一个超级应用不是靠开发者单打独斗，而是靠多个角色协同。FinClip 的后台做得非常细腻，功能齐全，不管是开发还是运维同学，都可以轻松驾驭！

小程序管理模块，不仅可以新建、管理前面上传的小程序，还可以体验预览版、发布审核；

首先，在隐私设置栏目里设置隐私保护指引：

然后我们就可以配置审核版本或者体验版本了！

接着我们就可以直接跳转到待办中心通过审核！

除此之外，常用的灰度发布、权限范围、自动上架全都支持；

数据分析清晰易读，不需要 BI 工具也能看懂；

让你不再为如何做好运维而发愁！

用了一周的真实感受

流程

使用一周多了，整体的流程是这样的：

优点

我们没改动原生代码，甚至没有重新接入任何 SDK，只是增加一个容器模块 + 几行配置。

团队有个原来的 RN 老项目，直接用 FinClip 的容器跑起来，居然都不用重写，兼容度真的惊人。

缺点

但是缺点也有：

比如，导入已有项目会进行检测，并且明确的告知用户，其实可以后台默认执行，用户体验会更好！

另外最主要的是，后台和编辑器的登陆状态是临时的，不会长期保持！每次登陆挺麻烦的

彩蛋

首先，FinClip 贴心的内置了 AI 助手，你使用过程遇到的任何问题都可以在这里找到答案！

最重要的是，FinClip 提供了基于接口的 AI 能力，可以通过 RAG 技术为小程序注入了智能化能力，涵盖内容生成、上下文交互、数据分析等多方面功能。

这不仅提升了用户体验，也为开发者提供了便捷的 AI 集成工具，进一步增强了 FinClip 生态的竞争力！

总结

如果再给我造一次 App 的机会，我一定毫不犹豫地选择 FinClip！

当我们从“做功能”切换到“建生态”，思路就会完全不一样：

• App 不再是“巨石应用”，而是一个个业务模块的拼图


• 小程序就像“微服务 UI 化”，能独立更新、上线、下架


• 技术架构也从“一体化耦合”变成“解耦 + 动态加载”

而 FinClip 帮助开发者从“重复搬砖” 变成 “生态平台管理员”！

如果你也有和我一样的困惑，你也可以试试：

• 把一个已有的活动页，用 FinClip 打包成小程序；


• 嵌进你现有 App 中，再用 FinClip Studio 发布版本；


• 后台配置白名单，手机扫码预览。

1 天内，你就能体验一把“做平台”的感觉。

时代正在变化。我们不该再为“发布一个功能”耗尽精力，而应该把更多时间留给真正重要的东西 —— 创新、体验、增长。

FinClip 不只是工具，更是重构开发者角色的机会。

你准备好了吗？

blender导出的轿车🚗.glb：

最近因为有需求，不得不搞起3d这一块，说到3d，以为是学一个threejs就够了，结果是blender也要学。

blender可能有的前端开发或者后端开发没了解过，简单得说就是捏3d模型的这么一个东西。

经常听人家说建模建模，就是这个东西来着。

下载下来就是这么一个软件👇🏻：

通过对blender的学习可以做很多东西，那blender究竟可以做什么。要想知道能做什么，就要先知道blender是个啥。

blender是一个永久开源且免费的三维创作软件，支持建模、雕刻、骨骼、装配、动画模拟实时渲染合成和运动跟踪等等三维创作。

推荐一下大家一些现成的模型网站或插件或者材质贴图等：

• sketchfab.com


• cubebrush.co


• cgmodel.com


• free3d.co


• blender.org/download/de…


• blendermarket.com


• blender.kim/


• github.com/poly-haven/…

🔴 入门

⭕︎ 课程内容与目标

• 学习基本设置、模型变换、建模、UV编辑、材质与贴图、渲染等核心流程


• 掌握独立制作初级3D模型的能力

核心学习点

观察 -> 辅助建模，提供更好的视觉策略

变换 -> 基本变化，实现移动、旋转、复制图像等移动策略

建模 -> 重塑多边形，杜绝线建模障碍

修改器 -> 提供更便捷的迭代可能性

uv -> 纹理图层的映射到表面的方法

材质 -> 基本材质的属性设置，只需参照别人设置的方式即可

渲染 -> 了解基本的渲染设置，灯光

不要被界面中无关的设置项影响。每个三维软件都是复杂的，但是目的只是为了满足不同人的不同需求。使用时，只需要按照方法简单设置一些需要的参数即可。别的参数默认即可。

如果你看文字太多，觉得烦躁，那就记得：没有太多欲望的话，我们目的就是实现建模，表现它的材质，把它渲染出来就可以了。三点:建模->材质->渲染。

⭕︎ Blender核心优势

⭕︎ 基础设置指南

⭕︎ 视口操作

快捷键ESC下面的波浪键,英文模式下:

flowchart TD

    B[基本视图控制]

    

    B --> B1[旋转视图]

    B1 -->|操作方式| 鼠标中键

    B1 -->|效果| 围绕视点中心旋转

    

    B --> B2[平移视图]

    B2 -->|操作方式| Shift+鼠标中键

    B2 -->|效果| 平移观察视角

    

    B --> B3[缩放视图]

    B3 -->|操作方式1| 滚动鼠标中键

    B3 -->|操作方式2| Shift+B框选缩放

    

    B --> B4[快捷键ESC下面的波浪键,英文模式下]

    

    style B fill:#4b8bf5

🔴 基础操作

⭕︎ 语言的设置

⭕︎ 场景设置单位

⭕︎ 文件栏

文件 - 编辑 - 渲染 - 窗口 - 帮助

⭕︎ 工作台

比如说uv编辑器：

比如说贴图：

比如说着色器：

比如编辑多边形的工具台：

⭕︎ 快捷键操作

按住鼠标中键 -> 旋转

按住鼠标中键 + shift -> 平移

鼠标中键滚动 -> 放大缩小

⭕︎ 不同视口查看

切换四格图：

shift+a创建一个网格:

ctrl+alt+q切换成四格图，同样再按一遍就是退出四格图。

如果需要查看更多的视图，也可以按一下Tab上面的波浪键，像这样：

(按住左键长按选中某个物体，可以单独查看选中物体的视图。)

接下来看一下这些视图的小图标，具体代表什么，如果有不太会的（大家可以鼠标悬浮在图标上面，它会给出具体的提示，然后大家可以每个小图标点一下试一试，不用害怕软件会崩盘，怎么弄软件都不会出事，自己可以多研究研究，即使崩了也可以重下载，放心大胆去试）：

一个是叠加层：可以添加线框，统计信息等辅助观察。

一个是视图着色方式。

🔴 基本体

点击文件->新建->常规，之前的文件看需求看看要不要保存。

默认会出现一个立方体，我们按x键，它会提示我们要删除这个物体吗？我们先删掉这个立方体。

上面我们说过，shift+a可以弹出一个面板：

这样子，我们先创建一个立方体，网格+立方体。

游标（在游标模式下，可以任意拖动游标）：

或者在选择模式下，按住shift+右键也是可以拖动游标的。

拖动游标，然后去新建一个立方体，我们会发现物体会创建在以游标为中心的位置。所以我们去创建一个物体，首先先要把游标的位置给设好，创新物体就会直接在游标那个位置了。

物体的设置面板：

选择某些或者某个物体，按住左键进行框选即可。

有时候选择的时候会发现框选住的，有一个是红的，一个是黄的。黄的是后加选上的，可以作为移动物体这样子。

按a键就是全选。ctrl + i就是反选。shift是加选。

🔴 基本变换

纸上得来终觉浅，我们还是得多动手去尝试尝试，就算是做一个小物件小物体，前期也会觉得会有满满的成就感，用某个操作键的知识特定得做一个小小练习。

⭕︎ 对齐、捕捉、复制

选中圆锥体，然后按shift选中平面。

那么圆锥体就是选中项，然后平面就是活动项。

圆锥体相对于平面这个活动体Z轴对齐：

吸附相关：

shift+D复制选中物体。ctrl+c + ctrl+v也可以复制粘贴物体。

作为一款程序员或者建筑设计行业的一款建模软件来讲，跟我们在学校里学的photoshop一样，需要投入主动学习成本，还有一些习惯上的成本比如一些快捷键取代图形化界面是非常有必要的。

到最后再结合去做three.js或者cesium模型加载展示、材质处理和动画。

🔴 总结

当然，除了blender，还有很多优秀的流行的3d渲染软件：

• blender


• 3dx Max


• Maya


• Cinema4D


• KeyShot

一些室内设计师用的: cad、酷家乐（要钱）。

我们这篇讲的是blender和threejs的结合。就是说blender负责建模和导出，threejs负责加载和交互，去做出交互式3d网页应用。

⭕︎ 流程

⭕︎ 1、blender导出：

在blender中创建模型，然后导出格式为.glb（二进制格式，包含材质、动画等）或.gltf。

⭕︎ 2、加载模型并交互：

// 导出默认函数，用于创建城市场景

export default function createCity() {

  // 创建GLTF加载器实例，用于加载.glb/.gltf格式的3D模型

  const gltfLoader = new GLTFLoader();



  // 加载城市模型文件

  gltfLoader.load("./model/city.glb", (gltf) => {

    // 遍历模型中的所有子对象

    gltf.scene.traverse((item) => {

      // 只处理网格类型(Mesh)的对象

      if (item.type == "Mesh") {

        console.log(item); // 调试用，打印网格信息



        // 创建新的基础材质并设置为深蓝色

        const cityMaterial = new THREE.MeshBasicMaterial({

          color: new THREE.Color(0x0c0e33), // 十六进制颜色值

        });

        item.material = cityMaterial; // 应用新材质到当前网格



        // 调用自定义函数修改城市材质(函数实现未展示)

        modifyCityMaterial(item);



        // 特殊处理名为"Layerbuildings"的网格

        if (item.name == "Layerbuildings") {

          // 使用MeshLine库创建线框效果(需额外引入MeshLine库)

          const meshLine = new MeshLine(item.geometry);

          const size = item.scale.x; // 获取原始缩放值

          meshLine.mesh.scale.set(size, size, size); // 保持原始比例

          scene.add(meshLine.mesh); // 将线框添加到场景

        }

      }

    });



    // 将整个模型添加到场景中

    scene.add(gltf.scene);



    // 以下是被注释掉的可选效果，可根据需要取消注释:

    

    // 添加普通飞线效果

    const flyLine = new FlyLine();

    scene.add(flyLine.mesh);



    // 添加着色器实现的飞线(性能更好)

    const flyLineShader = new FlyLineShader();

    scene.add(flyLineShader.mesh);

    

    // 添加雷达扫描效果

    const lightRadar = new LightRadar();

    scene.add(lightRadar.mesh);



    // 添加光墙效果

    const lightWall = new LightWall();

    scene.add(lightWall.mesh);



    // 添加可交互的警告标识

    const alarmSprite = new AlarmSprite();

    scene.add(alarmSprite.mesh);

    // 绑定点击事件

    alarmSprite.onClick(function (e) {

      console.log("警告", e); // 点击时触发

    });

  });

}

原有的结论有问题，这是最新的弥补篇。如果您还没有看过，可以先看新篇提出的问题再看这个。如果您已看过，可以看下最新篇。希望不会给您带来困扰，随时接受大佬们的批评。

新篇戳这里。更崩溃！！感觉被偷家了！Element-plus组件测试的后续~

---------------------以下为原文---------------------------

进来着急的前端佬，我直接抛出结论吧！

Element-plus的组件，经过测验，如下组件存在内存泄漏。如下：

• el-carousel


• el-select + el-options


• el-descriptions


• el-tag


• el-dialog


• el-notification


• el-loading


• el-result


• el-message


• el-button


• el-tabs


• el-menu


• el-popper

验证环境为：

Vue Version: 3.5.13

Element Plus Version: 2.9.7

Browser / OS: window 10 / Edge 134.0.3124.85 (正式版本) (64 位)

Build Tool: Webpack

不排查ElementUI也存在这个问题。

好了。接下来细细聊。

前因

为什么检测到这种问题？主要因为一个项目引用了Element-plus。然后，你懂的，买的人永远都会想要最好的，然后买的人就这么一顿狂点Web页面，看见内存占用飙到老高。

于是...前端佬都懂的，来活了。

排查

一开始我是不敢怀疑这种高star开源组件的。总以为自己是写的代码有问题。

详细代码就不贴了，主要用ElDialog组件，封装成一个命令式的Dialog组件，避免频繁的使用v-modal参数。

然后，就直接怀疑上这个组件了。

经过测试，果不其然，从关闭到销毁，会导致内存猛增，因为Dialog中有各种表单组件，一打开就创建了一大堆的Element元素。

精确定位，使用了FinalizationRegistry类追踪创建的Dialog实体，代码如下：

const finalizerRegistry = new FinalizationRegistry((heldValue) => {

  console.log('Finalizing instance: ',heldValue);

});





// 在创建处监听

const heldValue = Symbol(`DialogCommandComponent_${Date.now()}`);

finalizerRegistry.register(this, heldValue);

console.log(`Constructed instance:`,heldValue);

发现一直没有Constructed instance销毁的信息输出。

随后，使用了Edge浏览器中的分离元素来打快照，步骤如下图。

经过反复的操作，然后点击主动垃圾回收，然后发现el-dialog的元素都会增加，基本确认无疑了。

但还是怀疑，会不会是Dialog中，引用的问题，导致元素一直没能销毁？所以，使用了纯纯的el-dialog来校验，同样的操作，既然如故。

然后的然后，我使用了如下的代码，去校验其它组件是否存在同样的问题。代码如下：

<template>

  <div>

    <el-button @click="fn2">Reset</el-button>

  </div>

  <el-dialog v-model="model" destroy-on-close @closed="fn1" append-to-body v-if="destroyDialogModelValue"></el-dialog>

  <el-button @click="fn0" v-if="!button" primse>Click</el-button>

  <div class="weak" v-if="!button">xxx</div>

  <el-input v-if="!button" />

  <el-border v-if="!button" />

  <el-select v-if="!button">

    <el-option>1111</el-option>

  </el-select>

  <el-switch v-if="!button" />

  <el-radio v-if="!button" />

  <el-rate v-if="!button" />

  <el-slider v-if="!button" />

  <el-time-picker v-if="!button" />

  <el-time-select v-if="!button" />

  <el-transfer v-if="!button" />

  <el-tree-select v-if="!button" />

  <el-calendar v-if="!button" />

  <el-card v-if="!button" />

  <el-carousel height="150px" v-if="!button">

    <el-carousel-item v-for="item in 4" :key="item">

      <h3 class="small justify-center" text="2xl">{{ item }}</h3>

    </el-carousel-item>

  </el-carousel>

  <el-descriptions title="User Info" v-if="!button">

    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>

  </el-descriptions>

  <el-table style="width: 100%" v-if="!button">

    <el-table-column prop="date" label="Date" width="180" />

    <el-table-column prop="name" label="Name" width="180" />

    <el-table-column prop="address" label="Address" />

  </el-table>

  <el-avatar v-if="!button" />

  <el-pagination layout="prev, pager, next" :total="50" v-if="!button" />

  <el-progress :percentage="50" v-if="!button" />

  <el-result icon="success" title="Success Tip" sub-title="Please follow the instructions" v-if="!button">

    <template #extra>

      <el-button type="primary">Back</el-button>

    </template>

  </el-result>

  <el-skeleton v-if="!button" />

  <el-tag v-if="!button" />

  <el-timeline v-if="!button" />

  <el-tree v-if="!button" />

  <el-avatar v-if="!button" />

  <el-segmented size="large" v-if="!button" />

  <el-dropdown v-if="!button">

    <span class="el-dropdown-link">

      Dropdown List

      <el-icon class="el-icon--right">

        <arrow-down />

      </el-icon>

    </span>

    <template #dropdown>

      <el-dropdown-menu>

        <el-dropdown-item>Action 1</el-dropdown-item>

        <el-dropdown-item>Action 2</el-dropdown-item>

        <el-dropdown-item>Action 3</el-dropdown-item>

        <el-dropdown-item disabled>Action 4</el-dropdown-item>

        <el-dropdown-item divided>Action 5</el-dropdown-item>

      </el-dropdown-menu>

    </template>

  </el-dropdown>

  <el-menu class="el-menu-demo" mode="horizontal" v-if="!button">

    <el-menu-item index="1">Processing Center</el-menu-item>

    <el-sub-menu index="2">

      <template #title>Workspace</template>

      <el-menu-item index="2-1">item one</el-menu-item>

      <el-menu-item index="2-2">item two</el-menu-item>

      <el-menu-item index="2-3">item three</el-menu-item>

      <el-sub-menu index="2-4">

        <template #title>item four</template>

        <el-menu-item index="2-4-1">item one</el-menu-item>

        <el-menu-item index="2-4-2">item two</el-menu-item>

        <el-menu-item index="2-4-3">item three</el-menu-item>

      </el-sub-menu>

    </el-sub-menu>

    <el-menu-item index="3" disabled>Info</el-menu-item>

    <el-menu-item index="4">Orders</el-menu-item>

  </el-menu>



  <el-steps style="max-width: 600px" active="0" finish-status="success" v-if="!button">

    <el-step title="Step 1" />

    <el-step title="Step 2" />

    <el-step title="Step 3" />

  </el-steps>



  <el-tabs class="demo-tabs" v-if="!button">

    <el-tab-pane label="User" name="first">User</el-tab-pane>

    <el-tab-pane label="Config" name="second">Config</el-tab-pane>

    <el-tab-pane label="Role" name="third">Role</el-tab-pane>

    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>

  </el-tabs>



  <el-alert title="Success alert" type="success" v-if="!button" />

  <el-drawer title="I am the title" v-if="!button">

    <span>Hi, there!</span>

  </el-drawer>



  <div v-loading="model" v-if="!button"></div>



  <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon-color="#626AEF"

    title="Are you sure to delete this?" v-if="!button">

    <template #reference>

      <el-button>Delete</el-button>

    </template>

  </el-popconfirm>



  <el-popover class="box-item" title="Title" content="Top Center prompts info" placement="top" v-if="!button">

    <template #reference>

      <div>top</div>

    </template>

  </el-popover>



  <el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start" v-if="!button">

    <div>top-start</div>

  </el-tooltip>

</template>

<script setup>

import { ref } from "vue";

import { ElMessage, ElMessageBox, ElNotification } from "element-plus";



const model = ref(false);

const destroyDialogModelValue = ref(false);

const button = ref(false);



function fn0() {

  model.value = true;

  destroyDialogModelValue.value = true;

  ElMessage("This is a message.");

  ElMessageBox.alert("This is a message", "Title");

  ElNotification({

    title: "Title",

    message: "This is a reminder",

  });

}

function fn1() {

  console.log("closed");

  destroyDialogModelValue.value = false;

  button.value = true;

}

function reset() {

  model.value = false

}

</script>



<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

如上代码，进入页面后，点击click，然后关闭所有的弹窗。然后再次点击reset按钮，然后再次点击click，关闭所有弹窗。如此可以多操作几次。

就发现了开头的组件，都存在内存泄漏问题。

未能解决

有问题，当然首先看看别人有没有出现过。各种搜索就不说了，大掘金也搜过，在Element-plus的github仓里的Issues中找过，发现的办法基本无用。

以下是自己思考的几条路子：

结尾

还是在这里，求助大佬，看以上思路是否有错，然后跪求orz解决办法。

自己后续如果解决对应一些问题，会即时和大家分享。

Vue实现一个“液态玻璃”效果登录卡片

效果介绍

液态玻璃（Liquid Glass）是一种极具现代感的UI视觉风格，常见于高端网站和操作系统界面。它通过多层叠加、模糊、光泽、滤镜等技术，模拟出玻璃的通透、折射和高光质感。苹果的这次系统设计更新，带火了这一设计效果，本教程将带你一步步实现一个带有3D灵动倾斜交互的液态玻璃登录卡片。

实际效果：

技术原理解析

1. 多层叠加

液态玻璃效果的核心是多层视觉叠加：

• 模糊层（blur）：让背景内容变得虚化，产生玻璃的通透感。


• 色调层（tint）：为玻璃加上一层淡淡的色彩，提升质感。


• 高光层（shine）：模拟玻璃边缘的高光和内阴影，增强立体感。


• SVG滤镜：通过 SVG 的 feTurbulence 和 feDisplacementMap，让玻璃表面产生微妙的扭曲和流动感。

2. 3D灵动倾斜

通过监听鼠标在卡片上的移动，动态计算并设置 transform: perspective(...) rotateX(...) rotateY(...)，让卡片随鼠标灵动倾斜，增强交互体验。

3. 背景与环境

背景可以是渐变色，也可以是图片。玻璃卡片通过 backdrop-filter 与背景内容产生交互，形成真实的玻璃质感。

实现步骤详解

1. 结构搭建

<template>

  <div class="login-container animated-background">

    <!-- SVG滤镜库 -->

    <svg style="display: none">...</svg>

    <!-- 登录卡片 -->

    <div

      class="glass-component login-card"

      ref="tiltCard"

      @mousemove="handleMouseMove"

      @mouseleave="handleMouseLeave"

    >

      <div class="glass-effect"></div>

      <div class="glass-tint"></div>

      <div class="glass-shine"></div>

      <div class="glass-content">

        <!-- 登录表单内容 -->

      </div>

    </div>

  </div>

</template>

2. SVG滤镜实现液态扭曲

<svg style="display: none">

  <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">

    <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />

    <feComponentTransfer in="turbulence" result="mapped">

      <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />

      <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />

      <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />

    </feComponentTransfer>

    <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />

    <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">

      <fePointLight x="-200" y="-200" z="300" />

    </feSpecularLighting>

    <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />

    <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />

  </filter>

</svg>

• 这段 SVG 代码必须放在页面结构内，供 CSS filter 调用。

3. 背景设置

.animated-background {

  width: 100vw;

  height: 100vh;

  background-image: url('你的背景图片路径');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: fixed;

  top: 0;

  left: 0;

  z-index: -1;

}

• 建议用高质量渐变或壁纸，能更好衬托玻璃质感。

4. 卡片多层玻璃结构

.login-card {

  width: 400px;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);

  background: transparent;

  position: relative;

}

.glass-effect {

  position: absolute;

  inset: 0;

  z-index: 0;

  backdrop-filter: blur(5px);

  filter: url(#glass-distortion);

  isolation: isolate;

  border-radius: 24px;

}

.glass-tint {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: rgba(0, 0, 0, 0.15);

  border-radius: 24px;

}

.glass-shine {

  position: absolute;

  inset: 0;

  z-index: 2;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 24px;

  box-shadow:

    inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),

    inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);

  pointer-events: none;

}

.glass-content {

  position: relative;

  z-index: 3;

  padding: 2rem;

  color: white;

}

• 每一层都要有一致的 border-radius，才能保证圆角处无割裂。

5. 3D灵动倾斜交互

methods: {

  handleMouseMove (e) {

    const card = this.$refs.tiltCard

    const rect = card.getBoundingClientRect()

    const x = e.clientX - rect.left

    const y = e.clientY - rect.top

    const centerX = rect.width / 2

    const centerY = rect.height / 2

    const maxTilt = 18

    const rotateY = ((x - centerX) / centerX) * maxTilt

    const rotateX = -((y - centerY) / centerY) * maxTilt

    card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`

  },

  handleMouseLeave () {

    const card = this.$refs.tiltCard

    card.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)'

  }

}

• 鼠标移动时，卡片会根据指针位置灵动倾斜。


• 鼠标移出时，卡片平滑恢复。

6. 细节优化

• 阴影柔和：避免黑色边缘过重，提升高级感。


• 高光线条：用低透明度白色边框和内阴影，模拟玻璃高光。


• 所有层的圆角一致：防止割裂。


• 表单输入框：用半透明背景和模糊，保持整体风格统一。

7.完整代码

<template>

  <div class="login-container animated-background">

    <!-- SVG滤镜库 -->

    <svg style="display: none">

      <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">

        <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />

        <feComponentTransfer in="turbulence" result="mapped">

          <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />

          <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />

          <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />

        </feComponentTransfer>

        <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />

        <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">

          <fePointLight x="-200" y="-200" z="300" />

        </feSpecularLighting>

        <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />

        <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />

      </filter>

    </svg>



    <!-- 登录卡片 -->

    <div

      class="glass-component login-card"

      ref="tiltCard"

      @mousemove="handleMouseMove"

      @mouseleave="handleMouseLeave"

    >

      <div class="glass-effect"></div>

      <div class="glass-tint"></div>

      <div class="glass-shine"></div>

      <div class="glass-content">

        <h2 class="login-title">欢迎登录</h2>

        <form class="login-form">

          <div class="form-group">

            <input type="text" placeholder="用户名" class="glass-input">

          </div>

          <div class="form-group">

            <input type="password" placeholder="密码" class="glass-input">

          </div>

          <button type="submit" class="glass-button">登录</button>

        </form>

      </div>

    </div>

  </div>

</template>



<script>

export default {

  name: 'LiquidGlass',

  data () {

    return {

      // 可以添加需要的数据

    }

  },

  methods: {

    handleMouseMove (e) {

      const card = this.$refs.tiltCard

      const rect = card.getBoundingClientRect()

      const x = e.clientX - rect.left

      const y = e.clientY - rect.top

      const centerX = rect.width / 2

      const centerY = rect.height / 2

      // 最大旋转角度

      const maxTilt = 18

      const rotateY = ((x - centerX) / centerX) * maxTilt

      const rotateX = -((y - centerY) / centerY) * maxTilt

      card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`

    },

    handleMouseLeave () {

      const card = this.$refs.tiltCard

      card.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)'

    }

  }

}

</script>



<style lang="scss" scoped>

.login-container {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}



.animated-background {

  width: 100%;

  height: 100%;

  background-image: url('../../assets/macwallpaper.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}



.login-card {

  width: 400px;

  position: relative;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.6);

  cursor: pointer;

  background: transparent;

}



.glass-effect {

  position: absolute;

  inset: 0;

  z-index: 0;

  backdrop-filter: blur(5px);

  filter: url(#glass-distortion);

  isolation: isolate;

  border-radius: 24px;

}



.glass-tint {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: rgba(0, 0, 0, 0.15);

  border-radius: 24px;

}



.glass-shine {

  position: absolute;

  inset: 0;

  z-index: 2;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 24px;

  box-shadow:

    inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),

    inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);

  pointer-events: none;

}



.glass-content {

  position: relative;

  z-index: 3;

  padding: 2rem;

  color: white;

}



.login-title {

  text-align: center;

  color: #fff;

  margin-bottom: 2rem;

  font-size: 2rem;

  font-weight: 600;

  text-shadow: 0 1px 3px rgba(0,0,0,0.2);

}



.form-group {

  margin-bottom: 1.5rem;

}



.glass-input {

  width: 90%;

  padding: 12px 20px;

  border: none;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

  font-size: 1rem;

  backdrop-filter: blur(5px);

  transition: all 0.3s ease;



  &::placeholder {

    color: rgba(255, 255, 255, 0.7);

  }



  &:focus {

    outline: none;

    background: rgba(255, 255, 255, 0.2);

    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);

  }

}



.glass-button {

  width: 100%;

  padding: 12px;

  border: none;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.2);

  color: #fff;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  backdrop-filter: blur(5px);

  position: relative;

  overflow: hidden;



  &:hover {

    background: rgba(255, 255, 255, 0.3);

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

  }



  &:active {

    transform: translateY(0);

  }

}



// 添加点击波纹效果

.click-gradient {

  position: absolute;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(180,180,255,0.2) 40%, rgba(100,100,255,0.1) 70%, rgba(50,50,255,0) 100%);

  transform: translate(-50%, -50%) scale(0);

  opacity: 0;

  pointer-events: none;

  z-index: 4;

}



.glass-component.clicked .click-gradient {

  animation: gradient-ripple 0.6s ease-out;

}



@keyframes gradient-ripple {

  0% {

    transform: translate(-50%, -50%) scale(0);

    opacity: 1;

  }

  100% {

    transform: translate(-50%, -50%) scale(3);

    opacity: 0;

  }

}



.glass-component {

  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;

}

</style>

常见问题与优化建议

技术要点总结

• SVG滤镜：让玻璃表面有微妙的流动和扭曲感。


• backdrop-filter: blur：实现背景虚化。


• 多层叠加：色调、高光、阴影共同营造真实玻璃质感。


• 3D transform：提升交互体验。


• 细节打磨：阴影、边框、圆角、色彩都要精细调整。

结语

液态玻璃效果是现代前端视觉的代表之一。只要理解其原理，分层实现、细致调优，任何人都能做出媲美 macOS、Win11 的高端玻璃UI。希望本教程能帮助你掌握这项技术，做出属于自己的酷炫界面！

前言

你说，为什么❓尤雨溪搞响应式，他为什么要换掉Object.defineProperty呢❓

proxy什么来头❓

有一次👀看他直播，说去面试人家问他原型链，他不会，GG了面试黄了，你说他是不是无中生有暗度陈仓凭空想象凭空捏造new Proxy来换掉Object.defineProperty的呢？

还真不是，尤雨溪的响应式，我们暂且叫成插一脚吧👇，请听我细细道来👂

在前端开发中，响应式系统是现代框架的核心特性。无论是 Vue 还是 React，它们都需要实现一个基本功能：当数据变化时，自动更新相关的视图。用通俗的话说，就是要在数据被读取或修改时"插一脚"，去执行一些额外的操作（比如界面刷新、计算属性重新计算等）。

// 读取属性时

obj.a; // 需要知道这个属性被读取了



// 修改属性时

obj.a = 3; // 需要知道这个属性被修改了

但原生 JavaScript 对象不会告诉我们这些操作的发生。那么，尤雨溪是如何实现这种"插一脚"的能力的呢？

正文

Vue 2 的"插一脚"方案 - Object.defineProperty

基本实现原理

Vue 2 使用的是 ES5 的 Object.defineProperty API。这个 API 允许我们定义或修改对象的属性，并为其添加 getter 和 setter。

const obj = { a: 1 };



let v = obj.a;

Object.defineProperty(obj, 'a', {

  get() {

    console.log('读取 a'); // 插一脚：知道属性被读取了

    return v;

  },

  set(val) {

    console.log('更新 a'); // 插一脚：知道属性被修改了

    v = val;

  }

});



obj.a;     // 输出"读取 a"

obj.a = 3; // 输出"更新 a"

完整对象监听

为了让整个对象可响应，Vue 2 需要遍历对象的所有属性：

function observe(obj) {

  for (const k in obj) {

    let v = obj[k];

    Object.defineProperty(obj, k, {

      get() {

        console.log('读取', k);

        return v;

      },

      set(val) {

        console.log('更新', k);

        v = val;

      }

    });

  }

}

处理嵌套对象

对于嵌套对象，还需要递归地进行观察：

function _isObject(v) {

  return typeof v === 'object' && v !== null;

}



function observe(obj) {

  for (const k in obj) {

    let v = obj[k];

    if (_isObject(v)) {

      observe(v); // 递归处理嵌套对象

    }

    Object.defineProperty(obj, k, {

      get() {

        console.log('读取', k);

        return v;

      },

      set(val) {

        console.log('更新', k);

        v = val;

      }

    });

  }

}

Vue 2 方案的两大缺陷

缺陷一：效率问题

在这种模式下，他就必须要去遍历这个对象里边的每一个属性...这是第一个缺陷：必须遍历对象的所有属性，对于大型对象或深层嵌套对象，这会带来性能开销。

缺陷二：新增属性问题

无法检测到对象属性的添加或删除：

obj.d = 2; // 这个操作不会被监听到

因为一开始遍历的时候没有这个属性，后续添加的属性不会被自动观察。

Vue 3 的"插一脚"方案 - Proxy

基本实现原理

Vue 3 使用 ES6 的 Proxy 来重构响应式系统。Proxy 可以拦截整个对象的操作，而不是单个属性。

const obj = { a: 1 };



const proxy = new Proxy(obj, {

  get(target, k) {

    console.log('读取', k); // 插一脚

    return target[k];

  },

  set(target, k, val) {

    if (target[k] === val) return true;

    console.log('更新', k); // 插一脚

    target[k] = val;

    return true;

  }

});



proxy.a;     // 输出"读取 a"

proxy.a = 3; // 输出"更新 a"

proxy.d;     // 输出"读取 d" - 连不存在的属性也能监听到！

完整实现

function _isObject(v) {

  return typeof v === 'object' && v !== null;

}



function reactive(obj) {

  const proxy = new Proxy(obj, {

    get(target, k) {

      console.log('读取', k);

      const v = target[k];

      if (_isObject(v)) {

        return reactive(v); // 惰性递归

      }

      return v;

    },

    set(target, k, val) {

      if (target[k] === val) return true;

      console.log('更新', k);

      target[k] = val;

      return true;

    }

  });

  return proxy;

}

Proxy 的优势

"proxy 它解决了什么问题？两个问题。

第一个问题不需要深度遍历了，因为它不再监听属性了，而是监听的什么？整个对象。

同时也由于它监听了整个对象，就解决了第二个问题：能监听这个对象的所有操作，包括你去读写一些不存在的属性，都能监听到。"

原理对比与源码解析

原理对比

源码实现差异

Vue 2 实现：

• 在 src/core/observer 目录下


• 初始化时递归遍历整个对象


• 需要特殊处理数组方法

Vue 3 实现：

• 独立的 @vue/reactivity 包


• 使用 Proxy 实现基础响应式


• 惰性处理嵌套对象


• 更简洁的 API 设计

为什么 Proxy 是更好的选择？

总结

需显式操作（defineProperty）-> 声明式编程（Proxy）

局部监听（属性级别）-> 全局拦截（对象级别）。

从 Object.defineProperty 到 Proxy 的转变，不仅是 API 的升级，更是前端框架设计理念的进步。Vue 3 的响应式系统通过 Proxy 实现了更高效、更全面的数据监听。

作为一名后端开发工程师，当你面对复杂的业务流程时，是否常感到逻辑混乱、边界不清？学会状态机设计，让你的代码优雅如诗！

引言：为什么需要状态机？

在后台系统开发中，我们经常需要处理对象的状态流转问题：订单从"待支付"到"已支付"再到"已发货"，工单系统从"打开"到"处理中"再到"解决"，这些场景都涉及状态管理。

如果不使用状态机设计，我们可能会写出这样的面条式代码：

func HandleOrderEvent(order *Order, event Event) error {

    if order.Status == "待支付" {

        if event.Type == "支付成功" {

            order.Status = "已支付"

            // 执行支付成功逻辑...

        } else if event.Type == "取消订单" {

            order.Status = "已取消"

            // 执行取消逻辑...

        } else {

            return errors.New("非法事件")

        }

    } else if order.Status == "已支付" {

        if event.Type == "发货" {

            order.Status = "已发货"

            // 执行发货逻辑...

        }

        // 更多else if...

    }

    // 更多else if...

}

这种代码存在几个致命问题：

状态机正是解决这类问题的银弹！

状态机设计核心概念

状态机三要素

状态机的类型

graph LR

    A[待支付] -->|支付成功| B[已支付]

    B -->|发货| C[已发货]

    B -->|申请退款| D[退款中]

    A -->|取消订单| E[已取消]

    D -->|退款成功| E

    D -->|退款失败| B

Go实现状态机实战

基本结构定义

package main



import "fmt"



// 定义状态类型

type State string



// 定义事件类型

type Event string



// 状态转移函数类型

type TransitionHandler func() error



// 状态转移定义

type Transition struct {

    From   State

    Event  Event

    To     State

    Handle TransitionHandler

}



// 状态机定义

type StateMachine struct {

    Current     State

    transitions []Transition

}



// 注册状态转移规则

func (sm *StateMachine) AddTransition(from State, event Event, to State, handler TransitionHandler) {

    sm.transitions = append(sm.transitions, Transition{

        From:   from,

        Event:  event,

        To:     to,

        Handle: handler,

    })

}



// 处理事件

func (sm *StateMachine) Trigger(event Event) error {

    for _, trans := range sm.transitions {

        if trans.From == sm.Current && trans.Event == event {

            // 执行处理函数

            if err := trans.Handle(); err != nil {

                return err

            }

            // 更新状态

            sm.Current = trans.To

            return nil

        }

    }

    return fmt.Errorf("非法事件[%s]或当前状态[%s]不支持", event, sm.Current)

}

订单状态机示例

// 订单状态定义

const (

    StatePending  State = "待支付"

    StatePaid     State = "已支付"

    StateShipped  State = "已发货"

    StateCanceled State = "已取消"

)



// 事件定义

const (

    EventPaySuccess  Event = "支付成功"

    EventCancel      Event = "取消订单"

    EventShip        Event = "发货"

)



func main() {

    // 创建状态机

    sm := &StateMachine{Current: StatePending}

    

    // 注册状态转移

    sm.AddTransition(StatePending, EventPaySuccess, StatePaid, func() error {

        fmt.Println("执行支付成功处理逻辑...")

        return nil // 实际业务中可能有错误处理

    })

    

    sm.AddTransition(StatePending, EventCancel, StateCanceled, func() error {

        fmt.Println("执行订单取消逻辑...")

        return nil

    })

    

    sm.AddTransition(StatePaid, EventShip, StateShipped, func() error {

        fmt.Println("执行发货逻辑...")

        return nil

    })

    

    sm.AddTransition(StatePaid, EventCancel, StateCanceled, func() error {

        fmt.Println("执行已支付状态的取消逻辑...")

        return nil

    })

    

    // 执行事件测试

    fmt.Println("当前状态:", sm.Current)

    _ = sm.Trigger(EventPaySuccess) // 支付成功

    fmt.Println("当前状态:", sm.Current)

    _ = sm.Trigger(EventShip) // 发货

    fmt.Println("当前状态:", sm.Current)

    

    // 测试非法转移

    err := sm.Trigger(EventCancel)

    fmt.Println("尝试取消:", err) // 非法操作

}

输出结果：

当前状态: 待支付

执行支付成功处理逻辑...

当前状态: 已支付

执行发货逻辑...

当前状态: 已发货

尝试取消: 非法事件[取消订单]或当前状态[已发货]不支持

扩展：表驱动状态机

上面的实现足够清晰，但存在性能问题——每次触发事件都需要遍历转移表。我们优化为更高效的版本：

type StateMachineV2 struct {

    Current       State

    transitionMap map[State]map[Event]*Transition

}



func (sm *StateMachineV2) AddTransition(from State, event Event, to State, handler TransitionHandler) {

    if sm.transitionMap == nil {

        sm.transitionMap = make(map[State]map[Event]*Transition)

    }

    if _, exists := sm.transitionMap[from]; !exists {

        sm.transitionMap[from] = make(map[Event]*Transition)

    }

    sm.transitionMap[from][event] = &Transition{

        From:   from,

        Event:  event,

        To:     to,

        Handle: handler,

    }

}



func (sm *StateMachineV2) Trigger(event Event) error {

    if events, exists := sm.transitionMap[sm.Current]; exists {

        if trans, exists := events[event]; exists {

            if err := trans.Handle(); err != nil {

                return err

            }

            sm.Current = trans.To

            return nil

        }

    }

    return fmt.Errorf("非法事件[%s]或当前状态[%s]不支持", event, sm.Current)

}

进阶技巧：状态机实践指南

状态转移图可视化

绘制状态转移图，与代码实现保持同步：

状态模式的优雅实现

使用Go的接口特性实现面向对象的状态模式：

type OrderState interface {

    Pay() error

    Cancel() error

    Ship() error

    // 其他操作方法...

}



type pendingState struct{}



func (s *pendingState) Pay() error {

    fmt.Println("执行支付成功处理逻辑...")

    return nil

}



func (s *pendingState) Cancel() error {

    fmt.Println("执行待支付状态取消逻辑...")

    return nil

}



func (s *pendingState) Ship() error {

    return errors.New("当前状态不能发货")

}



// 其他状态实现...



type Order struct {

    state OrderState

}



func (o *Order) ChangeState(state OrderState) {

    o.state = state

}



func (o *Order) Pay() error {

    return o.state.Pay()

}



// 其他方法...

状态机的持久化

如何在数据库中存储状态机？永远只存储状态，而不是存储状态机逻辑！

数据库表设计示例：

状态恢复代码实现：

type Order struct {

    ID     int

    Status State

}



func RecoverOrderStateMachine(order Order) *StateMachine {

    sm := CreateStateMachine() // 创建初始状态机

    sm.Current = order.Status  // 恢复状态

    return sm

}

真实案例：电商订单系统

复杂状态机设计

处理并发操作

var mutex sync.Mutex



func (sm *StateMachine) SafeTrigger(event Event) error {

    mutex.Lock()

    defer mutex.Unlock()

    return sm.Trigger(event)

}



// 使用channel同步

func (sm *StateMachine) AsyncTrigger(event Event) error {

    eventChan := make(chan error)

    go func() {

        mutex.Lock()

        defer mutex.Unlock()

        eventChan <- sm.Trigger(event)

    }()

    return <-eventChan

}

避免状态机设计的反模式

监控状态转移示例：

func (sm *StateMachine) Trigger(event Event) error {

    startTime := time.Now()

    defer func() {

        log.Printf("状态转移监控: %s->%s (%s) 耗时: %v", 

            oldState, sm.Current, event, time.Since(startTime))

    }()

    // 正常处理逻辑...

}

结语：状态机的无限可能

状态机不只是解决业务逻辑的工具，它更是一种思维方式。通过今天的学习，你应该掌握了：

当你在设计下一个后端系统时，先问自己三个问题：

思考清楚这些问题，你的代码设计将变得更加清晰优雅！

一开始写 Vue 的时候，谁不是觉得：“哇，组件好优雅！”三年后再回头一看，组件目录像垃圾堆，维护一处改三处，props 乱飞、事件满天飞，复用全靠 copy paste。于是我终于明白 —— 组件设计，才是 Vue 项目的重灾区。

1. 抽组件 ≠ 拆文件夹

很多初学 Vue 的人对“组件化”的理解就是：“页面上出现重复的 UI？好，抽个组件。”

于是你会看到这样的组件：

<!-- TextInput.vue -->

<template>

  <input :value="value" @input="$emit('update:value', $event.target.value)" />

</template>

接着你又遇到需要加图标的输入框，于是复制一份：

<!-- IconTextInput.vue -->

<template>

  <div class="icon-text-input">

    <i class="icon" :class="icon" />

    <input :value="value" @input="$emit('update:value', $event.target.value)" />

  </div>

</template>

再后来你需要加验证、loading、tooltip……结果就变成了：

• TextInput.vue


• IconTextInput.vue


• ValidatableInput.vue


• LoadingInput.vue


• FormInput.vue

组件爆炸式增长，但每一个都只是“刚好凑合”，共用不了。

2. 抽象失控：为了复用而复用，结果没人敢用

比如下面这个场景：

你封装了一个超级复杂的表格组件：

<CustomTable

  :columns="columns"

  :data="tableData"

  :show-expand="true"

  :enable-pagination="true"

  :custom-actions="['edit', 'delete']"

/>

你美其名曰“通用组件”，但别人拿去一用就发现：

• 某个页面只要展示，不要操作按钮，配置了也没法删；


• 有个页面需要自定义排序逻辑，你这边死写死；


• 另一个页面用 element-plus 的样式，这边你自绘一套 UI；


• 报错时控制台输出一大堆 warning，根本不知道哪来的。

最后大家的做法就是 —— 不用你这套“通用组件”，自己抄一份改改。

3. 数据向下流、事件向上传：你真的理解 props 和 emit 吗？

Vue 的单向数据流原则说得很清楚：

父组件通过 props 向下传数据，子组件通过 emit 通知父组件。

但现实是：

• props 传了 7 层，页面逻辑根本看不懂数据哪来的；


• 子组件 emit 了两个 event，父组件又传回了回调函数；


• 有时候干脆直接用 inject/provide、ref、eventBus 偷偷打通通信。

举个例子：

<!-- 祖父组件 -->

<template>

  <PageWrapper>

    <ChildComponent :formData="form" @submit="handleSubmit" />

  </PageWrapper>

</template>



<!-- 子组件 -->

<template>

  <Form :model="formData" />

  <button @click="$emit('submit', formData)">提交</button>

</template>

看上去还好？但当 ChildComponent 再包一层 FormWrapper、再嵌套 InputList，你就发现：

• formData 根本不知道是哪个组件控制的


• submit 被多层包装、debounce、防抖、节流、劫持


• 你改一个按钮逻辑，要翻 4 个文件

4. 技术债爆炸的罪魁祸首：不敢删、不敢动

组件目录看似整齐，但大部分组件都有如下特征：

• 有 10 个 props，3 个事件，但没人知道谁在用；


• 注释写着“用于 A 页面”，实际上 B、C、D 页面也在引用；


• 一个小改动能引发“蝴蝶效应”，整个系统发疯。

于是你只能选择 —— 拷贝再新建一个组件，给它加个 V2 后缀，然后老的你也不敢删。

项目后期的结构大概就是：

components/

├── Input.vue

├── InputV2.vue

├── InputWithTooltip.vue

├── InputWithValidation.vue

├── InputWithValidationV2.vue

└── ...

“为了让别人能维护我的代码，我决定不动它。”

5. 组件设计的核心，其实是抽象能力

我用三年才悟到一个道理：

Vue 组件设计的难点，不是语法、也不是封装，而是你有没有抽象问题的能力。

举个例子：

你需要设计一个“搜索区域”组件，包含输入框 + 日期范围 + 搜索按钮。

新手写法：

<SearchHeader

  :keyword="keyword"

  :startDate="start"

  :endDate="end"

  @search="handleSearch"

/>

页面需求一改，换成了下拉框 + 单选框怎么办？又封一个组件？

更好的设计是 —— 提供slots 插槽 + 作用域插槽：

<!-- SearchHeader.vue -->

<template>

  <div class="search-header">

    <slot name="form" />

    <button @click="$emit('search')">搜索</button>

  </div>

</template>



<!-- 使用 -->

<SearchHeader @search="search">

  <template #form>

    <el-input v-model="keyword" placeholder="请输入关键词" />

    <el-date-picker v-model="range" type="daterange" />

  </template>

</SearchHeader>

把结构交给组件，把行为交给页面。组件不掌控一切，而是协作。

6. 那么组件怎么设计才对？

我总结出 3 条简单但有效的建议：

✅ 1. 明确组件职责：UI？交互？逻辑？

• UI 组件只关心展示，比如按钮、标签、卡片；


• 交互组件只封装用户操作，比如输入框、选择器；


• 逻辑组件封装业务规则，比如筛选区、分页器。

别让一个组件又画 UI 又写逻辑还请求接口。

✅ 2. 精简 props 和 emit，只暴露“必需”的接口

• 一个组件 props 超过 6 个，要小心；


• 如果事件名不具备业务语义（比如 click），考虑抽象；


• 不要用 ref 操作子组件的内部逻辑，那是反模式。

✅ 3. 使用 slots 替代“高度定制的 props 方案”

如果你发现你组件 props 变成这样：

<SuperButton

  :label="'提交'"

  :icon="'plus'"

  :iconPosition="'left'"

  :styleType="'primary'"

  :loading="true"

/>

那它该用 slot 了：

<SuperButton>

  <template #icon><PlusIcon /></template>

  提交

</SuperButton>

🙂

三年前我以为组件化是 Vue 最简单的部分，三年后我才意识到，它是最深、最难、最容易出坑的部分。

如果你也踩过以下这些坑：

• 组件复用越写越复杂，别人都不敢用；


• props 和事件像迷宫一样，维护成本极高；


• UI 和逻辑耦合，改一点动全身；


• 项目后期组件膨胀、技术债堆积如山；

别再让组件成为项目的“技术债”。你们也有遇到吗？

📌 你可以继续看我的系列文章

• 《我为什么觉得 React 正在逐渐失去吸引力？》


• 《低代码是“未来”还是“骗局”？作为前端我被内耗到了》


• 《为什么越来越多 Vue 项目用起了 UnoCSS？》


• 《用好了 defineProps 才叫会用 Vue3，90% 的写法都错了》


• 《为什么我放弃使用 Pinia？》


• 《为什么我不再相信 Tailwind？三个月重构项目教会我的事》

Hello，大家好，我是 Sunday。

最近，尤雨溪发了一篇非常关键的文章，宣布 Vite 正式引入 Rust 写的打包器 Rolldown，并将逐步替代现有的 Rollup 成为 默认打包器。

该文章发布在 尤雨溪 新公司 void(0)，文章链接：https://voidzero.dev/posts/announcing-rolldown-vite

虽然这篇文章的内容并不长，但是内部做出的改成确实非常大的，可以毫不夸张的说：尤雨溪把整个 vite 的心脏都换掉了！

所以，咱们今天这篇文章，我不打算重复发布会上的内容，而是一起来看看这波 “换心脏” 的背后逻辑：为什么 Rust 能上位？真实速度到底快了多少？尤雨溪到底在下一盘什么棋？

01：Vite 正在全面 Rust 化

很多人看到这次更新，可能会说：“Rolldown 不就是个性能更好的打包器吗？用不用都行吧？”

说实话，这种理解可能有些过于表面了。

这次更新的不仅仅是一个工具，而是把整个的 vite 底层都重写了一遍：

• Vite 的打包器，从 JS 写的 Rollup，换成了 Rust 写的 Rolldown


• 配套的 Babel、Terser、ESLint，也被 Rust 实现的 Oxc 接管


• 整个构建链路，从解析到压缩，从转换到分析，全都 Rust

为什么要这么干呢？

很简单，因为：JS 写的构建工具已经摸到天花板了。

不管你怎么做缓存、怎么压缩 AST、怎么优化 Plugin 顺序，JS 就是做不到 Rust 那种级别的执行效率。

而现代前端的项目体积正在变得越来越大，早就不是之前只写几个静态页面的事情了！

目前 微前端、组件库、国际化、权限系统……每加一个功能，构建时间就会变得越来越长，特别是很多公司在配合 CI/CD 的逻辑，每构建跑一次可能就得跑 2 分钟，而如果换成 Rolldown 那么就只要 15 秒上下了，你算算整个团队每天省下多少时间？

因此，这样的替换 “势在必行”，同时这也标记着：Vite 已经不再是一个 JS 写的现代前端工具了，而是一个由 Rust 驱动的、高性能构建内核。

02：真实表现到底快了多少？

咱们先来看官方数据：

这些官方给出的数据看上去是不是非常炸裂！

但是，根据前端圈的历史特性：所有官方性能对比，都只能作为参考，而不能作为实际的决策依据。

为啥呢？

因为，实际开发中，环境不同、项目结构不同、依赖链不同、构建目标不同，变量太多了。

很多的 demo 是干净环境下跑的，而你实际项目里，插件、polyfill、非预构建依赖一大堆，所以 官方数据，仅供参考！

但我要说的是：哪怕实际操作中，只能做到官方数据的一半，这件事也值得我们去尝试下。

就拿我自己接触的几个中大型项目来说，生产环境下的 Vite 构建时间基本都在 30 秒到 2 分钟之间浮动，特别是：

• 多语言、主题、子应用拆包场景下，Rollup 明显吃力


• babel + terser 的组合在压缩阶段特别耗 CPU


• 内存比较小的，如果在启动其他的任务（你电脑总得开其他的软件吧），那速度就更慢了

换句话说，如果 Rolldown 真能在这些环节上带来 哪怕 30% 的性能提升，对于团队的持续集成、构建稳定性、开发反馈体验，都是实打实的收益。

03：尤雨溪在下一盘大棋

很多同学可能会说：Vite 已经“遥遥领先”了，为啥还非要换底层呢？多麻烦呀！

如果你有这种疑惑的话，那么可能是因为你对 vite 使用到的这些新工具还不太了解，如果你了解一下背后的发布方，就知道这件事没那么简单。

Rolldown 是谁发布的？不是 Vue，也不是 Vite 核心团队，而是尤雨溪创办的新公司 —— VoidZero (也叫做 void(0) ) 。想要详细了解的，可以看下我之前发的这篇文章 尤雨溪新公司 Void(0) 首款产品发布，竟然是它...

这是一家由 尤雨溪 创建的专门做 JavaScript 工具链的开源公司。关于这一块的详细介绍，可以看这篇博客 尤雨溪创建 VoidZero ，并得到 460 万美金融资

这家公司刚一出手就连放两个大招：

• 第一个是 Oxc ：这是一个全新的 Rust 实现 JS 工具链（parser、transform、minifier、linter、formatter，全都自己造）


• 第二个就是 Rolldown：Vite 打包器的 Rust 替代方案，目标直接瞄准 Rollup、Babel、Terser 这整条传统链路

而这次 Vite 接入 Rolldown，正是 void(0) 把自家工具「回注入」开源生态的第一步。

所以这不是在“优化 Vite”，而是想要 “替换整条构建基础设施”

你可以这么理解 void(0) 的策略路径：

这其实是一个很聪明、很清晰的长期路线图：不再被 Babel、Terser、ESLint 等“生态外依赖”所绑定，而是自己控制工具底层、性能节奏、开发体验。

尤雨溪本人也在社区里反复提过：Vite 的未来，不只是“构建工具”，而是下一代工程化的“前端开发基建平台”。

而这张底牌，就是 Rolldown + Oxc。

你可以想想看，如果：

• Vue 生态已经在试水 Rolldown


• Vite 即将全面接入 Rolldown


• Vite 插件作者必须适配 Rolldown（否则未来会不兼容）

那就意味着：

无论你是 Vue、React、Svelte，还是用 Vite 的任何框架，都必须配合这次 “Rust 工具链” 的迁移。 否则将有可能会被踢出前端生态。

而想要参与，就必须要使用 Void(0) 的产品。

这样，尤雨溪就可以很成功的让 Void(0) 变成整个前端生态的标准了！

你可能听过“网易每天上线几百次”，
但你是否知道：99%的发布都不是全量，而是按灰度批次推进。

今天从代码 + 场景双视角，拆解网易灰度发布的完整实现逻辑，让你真正搞懂：

• 发布是怎么分用户、分地域、分时间段的


• 如何回滚不影响线上用户


• 甚至如何模拟真实用户流量进行 A/B 实验

一、网易灰度系统整体架构图（简化）

二、核心策略算法：如何选择灰度用户？

网易内部灰度用户分流引擎大致是这样：

interface User {

  uid: string

  region: string // 地域

  isVip: boolean

  loginTime: number // 最近登录时间

}



// 灰度策略配置

const strategy = {

  percent: 10,              // 灰度比例

  regionInclude: ['华南'],  // 地域包含

  vipOnly: true             // 只投放给 VIP

}



// 筛选函数

function filterUsers(users: User[], strategy) {

  const filtered = users.filter(u =>

    (!strategy.regionInclude || strategy.regionInclude.includes(u.region)) &&

    (!strategy.vipOnly || u.isVip)

  )

  const count = Math.floor((strategy.percent / 100) * filtered.length)

  return filtered.slice(0, count)

}