其它

前端

后端

园艺

居家

巴士模型

收藏品

日常

木质摆件

毛绒公仔

汽车模型

游记

生活

美食

计算机

设计

铁道模型

<h3>
    <i class="icon icon--book"></i>  模型资料
</h3>
<div class="bus-info">
  <div class="bus-info__cover">
    <img decoding="async" src="//static.hezhiyi.com/images/blog/%E6%94%B6%E8%97%8F%E5%93%81/Bus_1/1.png" alt="广州客车厂 GZK6120FS 巴士模型">
  </div>
  <div class="bus-info__list">
    <dl class="bus-info__item">
      <dt class="bus-info__label">厂商</dt>
      <dd class="bus-info__value">广州客车厂</dd>
    </dl>
    <dl class="bus-info__item">
      <dt class="bus-info__label">型号</dt>
      <dd class="bus-info__value">GZK6120FS</dd>
    </dl>
    <dl class="bus-info__item">
      <dt class="bus-info__label">城市</dt>
      <dd class="bus-info__value">广州</dd>
    </dl>
    <dl class="bus-info__item">
      <dt class="bus-info__label">线路</dt>
      <dd class="bus-info__value">28</dd>
    </dl>
    <dl class="bus-info__item">
      <dt class="bus-info__label">运营区间</dt>
      <dd class="bus-info__value">天平架 ⇄ 龙洞</dd>
    </dl>
    <dl class="bus-info__item">
      <dt class="bus-info__label">比例</dt>
      <dd class="bus-info__value">1 / 76</dd>
    </dl>
    <dl class="bus-info__item">
      <dt class="bus-info__label">材质</dt>
      <dd class="bus-info__value">树脂胶</dd>
    </dl>
  </div>
</div>
<blockquote>
<p>1993年，广州客车厂推出广州首款自产双层巴士，并率先投入62、63路线行驶；1998年，广客双层巴士转入28路（天平架—龙洞）继续使用；2001年1月，最后一辆广州牌双层巴士就在28路退役。</p>
</blockquote>
<h3>
    <i class="icon icon--camera"></i>  车身展示
</h3>
<div class="image-list banner">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/10.png" alt="">
    </div>
</div>
<div class="image-list banner">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/9.png" alt="">
    </div>
</div>
<div class="image-list col-2">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/3.png" alt="">
    </div>
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/8.png" alt="">
    </div>
</div>
<div class="image-list banner">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/5.png" alt="">
    </div>
</div>
<div class="image-list banner">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/6.png" alt="">
    </div>
</div>
<div class="image-list banner">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/7.png" alt="">
    </div>
</div>
<h3>
    <i class="icon icon--camera"></i>  内部细节
</h3>
<div class="image-list col-2">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/11.png" alt="">
    </div>
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/12.png" alt="">
    </div>
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/13.png" alt="">
    </div>
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/14.png" alt="">
    </div>
</div>
<h3>
    <i class="icon icon--message"></i>  后续故事
</h3>
<p>还记得初中月票的年代，周末总约上好友去天平架搭 28 路，特意选双层巴士慢悠悠 “游车河”。一晃快三十年，以为早已消失在岁月里的广州牌双层巴士，原来一直都在。</p>
<p>2002 年，一汽巴士将这辆老车翻新后捐赠给广州博物馆，却因馆内暂无合适展陈空间，暂时送回车陂修理厂安放。直到 2012 年再次精心修缮，它才正式入驻广州博物馆。</p>
<p>得知消息后，我特意登上越秀山寻访，终于在仲元楼馆区，与这辆满载回忆的老巴士重逢，一眼便是半生时光。</p>
<div class="blank"></div>
<div class="image-list col-2">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/15.png" alt="">
    </div>
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/16.png" alt="">
    </div>
</div>
<div class="blank"></div>
<div class="image-list col-3">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/19.jpg" alt="">
    </div>
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/20.jpg" alt="">
    </div>
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_1/21.jpg" alt="">
    </div>
</div>

广客双层巴士 GZK6120FS

<p>
    <i class="icon icon--date"></i> 2026-03-21
</p>
<p>
    <i class="icon icon--flag"></i> 顺德欢乐海岸
</p>
<p>
    <i class="icon icon--rainy"></i> 雨
</p>
<div class="preface">
    ✨ 今年专程奔赴顺德再战一年一度佛山五十公里徒步，路线更长，想好好挑战自己，看看自己到底能坚持多远。
</div>
<figure class="figure-h">
  <img data-src="//static.hezhiyi.com/images/blog/2026/佛山五十公里徒步_顺德线/01.png" alt="">
</figure>
<h3>📍 起点｜顺德欢乐海岸</h3>
<p><code>08:30 出发</code></p>
<p>天阴沉沉，刚起步就飘起小雨</p>
<p>防水风衣也挡不住凉意</p>
<p>但身边每个人都热情满满</p>
<p>瞬间被点燃，直接开冲！</p>
<h3>📌 第一签｜桂畔海篮球场</h3>
<p><code>10:31</code>・<code>行程：7KM</code>・<code>用时：2小时1分</code></p>
<p>状态超轻松～</p>
<p>沿途顺峰山、云鹭湿地、桂畔海风景都很美</p>
<p>可惜雨断断续续，少拍了好多照片</p>
<p>但心情一点没受影响</p>
<p>简单补水补给，继续向前</p>
<div class="image-list col-3">
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/2026/佛山五十公里徒步_顺德线/02.png" alt="">
    </div>
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/2026/佛山五十公里徒步_顺德线/03.png" alt="">
    </div>
    <div class="image-item">
      <img data-src="//static.hezhiyi.com/images/blog/2026/佛山五十公里徒步_顺德线/04.png" alt="">
    </div>
</div>
<h3>📌 第二签｜乌洲水闸集市</h3>
<p><code>13:12</code>・<code>行程：15KM</code>・<code>用时：2小时41 分</code></p>
<p>走到这里直接心态崩了！</p>
<p>伦教突降大暴雨，视线模糊，路面全是积水，鞋子早已湿透。</p>
<p>躲雨时又冷又累，甚至萌生放弃的念头，可看着周围没有便捷交通，只能咬牙坚持。</p>
<p>不过这里可以免费进入长鹿乐园，随便踩点看以后值不值得来。</p>
<div class="image-list col-3">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2026/佛山五十公里徒步_顺德线/05.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2026/佛山五十公里徒步_顺德线/06.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2026/佛山五十公里徒步_顺德线/07.png" alt="">
    </div>
</div>
<h3>📌 第三签｜西海亲水平台</h3>
<p><code>14:34</code>・<code>行程：22KM</code>・<code>用时：1小时22 分</code></p>
<p>在大雨中煎熬一个多小时，终于抵达第三签。</p>
<p>幸运的是，雨渐渐停了。</p>
<p>河边微风拂过，尽管全身湿透，疲惫却消散大半，补充能量后，重新出发。</p>
<h3>📌 第四签｜君兰河岸公园</h3>
<p><code>15:45</code>・<code>行程：29KM</code>・<code>用时：1小时11 分</code></p>
<p>雨停了，可鞋子里全是水</p>
<p>每一步都不舒服走完快 30 公里，腿开始发酸</p>
<p>但行程已经过半</p>
<p>心里反而多了一份必到终点的底气</p>
<p>坚持住，往前冲！</p>
<h3>📌 第五签｜龙堤广场</h3>
<p><code>18:23</code>・<code>行程：36KM</code>・<code>用时：2小时38 分</code></p>
<p>这几公里，全程最煎熬</p>
<p>腿酸到没力气</p>
<p>脚底泡水泡出了水泡，每一步都疼</p>
<p>傍晚天慢慢暗下来</p>
<p>路上依旧人潮不断</p>
<p>说明我们没有掉队</p>
<p>只剩最后 4 公里</p>
<p>无论如何都要撑到最后！</p>
<h3>🏁 终点｜世纪莲体育中心</h3>
<p><code>19:20</code>・<code>全程：40KM</code>・<code>总时长：约11小时</code></p>
<p>终于抵达终点！</p>
<p>近 11 小时风雨兼程</p>
<p>40 公里圆满完成</p>
<p>累到双腿抬不起来</p>
<p>心里却超级兴奋、超级骄傲</p>
<p>暴雨、淋雨、水泡、疲惫</p>
<p>全都扛下来了</p>
<p>没有什么能挡住坚持的脚步！</p>
<div class="image-list col-2">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2026/佛山五十公里徒步_顺德线/08.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2026/佛山五十公里徒步_顺德线/09.png" alt="">
    </div>
</div>
<h3>✍️ 小结</h3>
<p>这次顺德线比上次禅城徒步更辛苦</p>
<p>不只是距离更远</p>
<p>还遇上全程阴雨</p>
<p>沿江风景在雨天少了几分惊艳</p>
<p>却也遇见了很多从没踏过的风景</p>
<p>同行伙伴超给力，一路互相打气</p>
<p>让这段路更有意义</p>
<p>风雨无阻，挑战自我</p>
<p>期待下一次，再出发！</p>

2026 佛山五十公里徒步・顺德线

<p>短短几年，AI 来得太快，对行业冲击也太快。过去两年我还习惯通过 GPT、Deepseek 等获取 AI 协助，但最近尝试改用 VSCode 搭配 Copilot 后，切身感受到了 AI 辅助开发的强大。它能自动通过当前项目获取上下文，通过分析并进行编码工作。</p>
<h3>一、环境搭建与基础配置</h3>
<p>1.1 插件安装流程</p>
<ol>
<li>
<p>核心插件安装：在 VSCode 扩展市场搜索 GitHub Copilot 和 GitHub Copilot Chat，完成安装并重启编辑器；二者需搭配使用，前者负责内联代码补全，后者提供交互式对话调试。</p>
</li>
<li>
<p>账号授权：登录已开通 Copilot 订阅的 GitHub 账号，完成编辑器与 GitHub 的权限绑定，确保网络环境可正常访问 GitHub 服务。</p>
</li>
<li>
<p>基础启用检查：右下角出现 Copilot 图标即代表激活成功，可通过图标快速开启/关闭补全、查看用量、进入设置面板。</p>
</li>
</ol>
<p>1.2 关键配置优化</p>
<p>为兼顾效率与代码质量，针对性调整以下设置（文件 → 首选项 → 设置，搜索 Copilot 关键词）：</p>
<ul>
<li>
<p>代码补全延迟：调低响应延迟，避免频繁手动触发补全，提升流畅度</p>
</li>
<li>
<p>启用记忆功能：开启 github.copilot.chat.copilotMemory.enabled，让 Copilot 记住项目编码规范、命名风格，减少重复调教</p>
</li>
<li>
<p>过滤无关建议：关闭非当前项目语言的冗余补全，降低干扰</p>
</li>
<li>
<p>快捷键自定义：绑定常用快捷键（接受建议、切换下一条、手动触发补全），提升操作速度</p>
</li>
</ul>
<h3>二、核心功能实战用法</h3>
<p>2.1 内联代码补全（高频场景）</p>
<p>这是 Copilot 最基础也最实用的能力，贴合手写代码节奏，无需打断思路：</p>
<ul>
<li>
<p>单行/多行补全：输入函数名、注释或关键逻辑，Copilot 自动预判后续代码，按 Tab 接受建议，Alt/Option + ]/[ 切换备选方案。</p>
</li>
<li>
<p>批量代码生成：编写清晰的单行注释（如 // 封装 axios 请求拦截器，统一处理 token 和报错），Copilot 可直接生成完整可运行的函数块。</p>
</li>
<li>
<p>语法适配：支持主流编程语言（JavaScript/TypeScript、Python、Java、Go等），自动适配项目的代码风格、缩进规则、变量命名。</p>
</li>
</ul>
<p>2.2 Copilot Chat 交互式开发（进阶效率）</p>
<p>通过侧边栏聊天窗口，实现代码解读、调试、重构一站式操作，核心用法：</p>
<ul>
<li>
<p>代码解释：选中晦涩代码，右键选择「Ask Copilot」，快速理清逻辑、梳理参数含义，适合接手旧项目。</p>
</li>
<li>
<p>BUG 定位与修复：粘贴报错信息 + 异常代码片段，Copilot 自动分析报错原因，给出修复方案并标注修改点。</p>
</li>
<li>
<p>代码重构：指令式提问（如「将这段回调函数改写为 Promise/async await」「优化这段代码的可读性，添加注释并拆分函数」），批量优化冗余代码。</p>
</li>
<li>
<p>文档与注释生成：一键生成 JSDoc、函数注释、接口说明，规范代码文档，减少手动编写工作量。</p>
</li>
</ul>
<p>2.3 高阶场景拓展</p>
<ul>
<li>
<p>测试用例生成：针对业务函数，自动生成单元测试代码，覆盖正常、异常、边界场景，提升测试效率。</p>
</li>
<li>
<p>Git 提交信息/PR 描述：基于代码变更，自动生成规范的 commit 信息，省去文案梳理时间。</p>
</li>
<li>
<p>终端命令辅助：直接询问常用命令（如 Docker 部署、npm 脚本、Linux 操作），快速获取可复制执行的指令。</p>
</li>
</ul>
<h3>三、使用心得与效率提升技巧</h3>
<p>核心原则：清晰的指令 = 高质量的结果</p>
<ul>
<li>
<p>精准描述需求：避免模糊提问，用「做什么+语言+规范」的句式提问，例如「用 TypeScript 编写一个防抖函数，支持立即执行和取消功能，符合 ES6+ 规范」。</p>
</li>
<li>
<p>上下文投喂：涉及项目全局逻辑时，先粘贴依赖代码或配置项，让 Copilot 基于项目上下文生成适配代码，避免通用化模板。</p>
</li>
<li>
<p>分步调教：复杂功能分步骤生成，先搭框架，再补逻辑，最后优化细节，降低出错率。</p>
</li>
<li>
<p>代码必校验：Copilot 生成代码需逐行审核，重点校验逻辑漏洞、边界情况、依赖引入，杜绝直接照搬上线。</p>
</li>
<li>
<p>快捷键固化：养成快捷键操作习惯，减少鼠标点击，最大化提升编码速度。</p>
</li>
</ul>
<h3>四、常见问题与避坑总结</h3>
<p>4.1 常见问题排查</p>
<ul>
<li>
<p>补全不生效/无响应：检查 GitHub 登录状态、网络连通性、插件是否启用，重启 VSCode 或重新授权即可解决。</p>
</li>
<li>
<p>建议质量差/不符合规范：补充项目上下文、细化指令，开启记忆功能让 Copilot 适配项目风格，避免过度依赖通用建议。</p>
</li>
<li>
<p>卡顿/延迟高：关闭无关扩展，调低补全延迟，限制 Copilot 同时分析的文件数量。</p>
</li>
</ul>
<p>4.2 避坑要点</p>
<ul>
<li>
<p>严禁直接使用未审核的生成代码上线，尤其是涉及数据处理、权限校验、安全逻辑的代码。</p>
</li>
<li>
<p>注意代码版权与合规性，商业项目需甄别生成代码的来源，避免侵权风险。</p>
</li>
<li>
<p>不要过度依赖 Copilot，核心业务逻辑需自主设计，AI 仅作为效率工具辅助编码。</p>
</li>
</ul>
<h3>五、总结与后续规划</h3>
<p>VSCode + Copilot 组合极大缩短了重复代码编写时间，降低了技术卡点的解决成本，日均编码效率提升约 40%，尤其适合快速迭代、原型开发、代码规范化场景。</p>
<p>后续将进一步探索 Copilot 智能体模式、MCP 工具集成、团队共享规范等高阶能力，把 AI 辅助融入全开发流程，同时强化代码审核机制，兼顾效率与质量。</p>

VSCode + Copilot 实战使用

<p>近期在使用影刀开发自动化流程，发现即便借助影刀的指令体系，深入掌握 Python 第三方库依然至关重要。这些库覆盖了数据处理、可视化、网络请求、自动化等几乎所有编程场景，因此我整理了这份新手入门级的 Python 常用库笔记，包含核心功能、安装方式和极简示例，助力快速上手。</p>
<h3>一、基础必备库</h3>
<h4>1. NumPy（数值计算基础）</h4>
<h5>核心功能</h5>
<ul>
<li>提供高性能的<strong>多维数组（ndarray）</strong> 数据结构，是科学计算的基础。</li>
<li>支持向量化运算、矩阵操作、线性代数、傅里叶变换等数值计算。</li>
<li>比 Python 原生列表快得多，是 Pandas、Matplotlib 等库的底层依赖。</li>
</ul>
<h5>安装</h5>
<pre><code class="lang-bash language-bash bash">pip install numpy</code></pre>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">import numpy as np

# 创建一维数组
arr1 = np.array([1, 2, 3, 4])
# 创建二维数组（矩阵）
arr2 = np.array([[1, 2], [3, 4]])

# 数组运算（向量化，无需循环）
print(arr1 * 2)  # 输出：[2 4 6 8]
print(arr2 + arr2)  # 输出：[[2 4], [6 8]]
# 矩阵乘法
print(arr2 @ arr2)  # 输出：[[7 10], [15 22]]</code></pre>
<h4>2. Pandas（数据处理与分析）</h4>
<h5>核心功能</h5>
<ul>
<li>提供 <strong>DataFrame（表格型数据结构）</strong> 和 Series（一维序列），完美适配表格数据（如 Excel/CSV）。</li>
<li>支持数据清洗（缺失值、重复值处理）、筛选、分组、合并、透视表等。</li>
<li>是数据分析、数据挖掘的核心工具，能轻松处理几十万甚至百万行数据。</li>
</ul>
<h5>安装</h5>
<pre><code class="lang-bash language-bash bash">pip install pandas</code></pre>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">import pandas as pd

# 创建DataFrame（模拟表格数据）
df = pd.DataFrame({
    &quot;姓名&quot;: [&quot;张三&quot;, &quot;李四&quot;, &quot;王五&quot;],
    &quot;年龄&quot;: [20, 25, 30],
    &quot;城市&quot;: [&quot;北京&quot;, &quot;上海&quot;, &quot;广州&quot;]
})

# 数据查看
print(df.head())  # 查看前n行（默认5行）
# 数据筛选：筛选年龄&gt;22的行
print(df[df[&quot;年龄&quot;] &gt; 22])
# 保存为CSV文件
df.to_csv(&quot;user_info.csv&quot;, index=False)
# 读取CSV文件
df_read = pd.read_csv(&quot;user_info.csv&quot;)</code></pre>
<h3>二、数据可视化库</h3>
<h4>1. Matplotlib（基础可视化库）</h4>
<h5>核心功能</h5>
<ul>
<li>Python 最基础的绘图库，支持绘制折线图、柱状图、散点图、直方图等几乎所有基础图表。</li>
<li>高度可定制（标题、坐标轴、颜色、样式等），是其他可视化库（如 Seaborn）的底层。</li>
</ul>
<h5>安装</h5>
<pre><code class="lang-bash language-bash bash">pip install matplotlib</code></pre>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">import matplotlib.pyplot as plt
import numpy as np

# 生成数据
x = np.linspace(0, 10, 100)  # 0到10之间生成100个均匀分布的数
y = np.sin(x)

# 绘制折线图
plt.plot(x, y, color=&quot;red&quot;, label=&quot;sin(x)&quot;)
plt.xlabel(&quot;X轴&quot;)  # X轴标签
plt.ylabel(&quot;Y轴&quot;)  # Y轴标签
plt.title(&quot;正弦函数曲线&quot;)  # 标题
plt.legend()  # 显示图例
plt.show()  # 展示图表</code></pre>
<h4>2. Seaborn（高级可视化库）</h4>
<h5>核心功能</h5>
<ul>
<li>基于 Matplotlib 封装，语法更简洁，默认样式更美观。</li>
<li>专注于统计可视化（如箱线图、热力图、小提琴图、配对图），适配 Pandas 的 DataFrame。</li>
</ul>
<h5>安装</h5>
<pre><code class="lang-bash language-bash bash">pip install seaborn</code></pre>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">import seaborn as sns
import pandas as pd

# 使用内置数据集
tips = sns.load_dataset(&quot;tips&quot;)  # 餐饮小费数据集

# 绘制柱状图（按性别分组，展示平均消费）
sns.barplot(x=&quot;sex&quot;, y=&quot;total_bill&quot;, data=tips)
# 绘制热力图（展示变量相关性）
sns.heatmap(tips.corr(numeric_only=True), annot=True, cmap=&quot;coolwarm&quot;)</code></pre>
<h3>三、网络请求与爬虫库</h3>
<h4>1. Requests（HTTP 请求库）</h4>
<h5>核心功能</h5>
<ul>
<li>替代 Python 原生的 urllib，语法极简，支持 GET/POST 请求、Cookie、Headers、代理等。</li>
<li>是爬虫、调用 API 接口的首选库。</li>
</ul>
<h5>安装</h5>
<pre><code class="lang-bash language-bash bash">pip install requests</code></pre>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">import requests

# GET请求（获取网页内容）
response = requests.get(&quot;https://www.baidu.com&quot;)
response.encoding = &quot;utf-8&quot;  # 设置编码
print(response.text[:100])  # 打印前100个字符

# POST请求（模拟表单提交）
data = {&quot;username&quot;: &quot;test&quot;, &quot;password&quot;: &quot;123456&quot;}
response = requests.post(&quot;https://httpbin.org/post&quot;, data=data)
print(response.json())  # 以JSON格式返回响应</code></pre>
<h4>2. BeautifulSoup4（网页解析库）</h4>
<h5>核心功能</h5>
<ul>
<li>解析 HTML/XML 页面，提取标签、属性、文本等内容，搭配 Requests 实现爬虫。</li>
<li>支持 CSS 选择器、正则表达式匹配，上手简单。</li>
</ul>
<h5>安装</h5>
<pre><code class="lang-bash language-bash bash">pip install beautifulsoup4</code></pre>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">import requests
from bs4 import BeautifulSoup

# 获取网页内容
response = requests.get(&quot;https://www.baidu.com&quot;)
soup = BeautifulSoup(response.text, &quot;html.parser&quot;)  # 解析HTML

# 提取指定标签（比如所有a标签的href属性）
a_tags = soup.find_all(&quot;a&quot;)  # 找到所有a标签
for tag in a_tags[:5]:  # 打印前5个
    print(tag.get(&quot;href&quot;), tag.text)</code></pre>
<h3>四、自动化与实用工具库</h3>
<h4>1. os &amp; sys（系统交互库，内置）</h4>
<h5>核心功能</h5>
<ul>
<li><code>os</code>：操作文件/目录（创建、删除、遍历、路径拼接）、执行系统命令。</li>
<li><code>sys</code>：获取系统参数（如命令行参数、Python 版本）、控制程序退出等。</li>
<li>无需安装，Python 原生内置。</li>
</ul>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">import os
import sys

# os库示例：遍历指定目录下的文件
print(os.listdir(&quot;.&quot;))  # 列出当前目录所有文件/文件夹
os.makedirs(&quot;test_dir&quot;, exist_ok=True)  # 创建目录（已存在则不报错）

# sys库示例：获取命令行参数
print(&quot;Python版本：&quot;, sys.version)
print(&quot;命令行参数：&quot;, sys.argv)  # 运行时传入的参数，如python test.py 123，则sys.argv=[test.py, 123]</code></pre>
<h4>2. datetime（时间处理库，内置）</h4>
<h5>核心功能</h5>
<ul>
<li>处理日期、时间的解析、格式化、加减运算，替代原生 time 库的复杂操作。</li>
<li>无需安装，Python 原生内置。</li>
</ul>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">from datetime import datetime, timedelta

# 获取当前时间
now = datetime.now()
print(now.strftime(&quot;%Y-%m-%d %H:%M:%S&quot;))  # 格式化输出：2026-03-11 10:00:00

# 时间加减（比如3天后）
after_3_days = now + timedelta(days=3)
print(after_3_days.strftime(&quot;%Y-%m-%d&quot;))

# 解析字符串为时间
time_str = &quot;2026-01-01&quot;
time_obj = datetime.strptime(time_str, &quot;%Y-%m-%d&quot;)
print(time_obj)</code></pre>
<h4>3. OpenPyXL（Excel 操作库）</h4>
<h5>核心功能</h5>
<ul>
<li>读写 Excel 文件（.xlsx 格式），支持单元格样式、公式、合并单元格等。</li>
<li>替代老旧的 xlrd/xlwt，功能更全面。</li>
</ul>
<h5>安装</h5>
<pre><code class="lang-bash language-bash bash">pip install openpyxl</code></pre>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">from openpyxl import Workbook, load_workbook

# 创建新Excel并写入数据
wb = Workbook()
ws = wb.active  # 获取活跃工作表
ws[&quot;A1&quot;] = &quot;姓名&quot;
ws[&quot;B1&quot;] = &quot;年龄&quot;
ws[&quot;A2&quot;] = &quot;张三&quot;
ws[&quot;B2&quot;] = 20
wb.save(&quot;test.xlsx&quot;)  # 保存文件

# 读取Excel数据
wb = load_workbook(&quot;test.xlsx&quot;)
ws = wb.active
print(ws[&quot;A2&quot;].value)  # 输出：张三
print(ws[&quot;B2&quot;].value)  # 输出：20</code></pre>
<h4>4. Playwright（现代自动化测试/爬虫库）</h4>
<h5>核心功能</h5>
<ul>
<li>由微软开发，支持<strong>无头浏览器</strong>自动化（Chrome、Firefox、Safari 全兼容）。</li>
<li>相比 Selenium 更轻量、速度更快，API 设计更简洁，内置等待机制（无需手动加 sleep）。</li>
<li>可用于网页自动化操作、动态渲染页面爬虫（如 JavaScript 加载的内容）、UI 自动化测试。</li>
<li>支持同步/异步两种调用方式，新手优先学同步版即可。</li>
</ul>
<h5>安装</h5>
<pre><code class="lang-bash language-bash bash"># 安装库
pip install playwright
# 安装浏览器驱动（首次使用必须执行，会下载Chrome/Firefox/Safari驱动）
playwright install</code></pre>
<h5>极简示例</h5>
<pre><code class="lang-python language-python python">from playwright.sync_api import sync_playwright

# 启动浏览器（headless=False 显示浏览器窗口，True 为无头模式）
with sync_playwright() as p:
    # 选择浏览器：chromium/firefox/webkit
    browser = p.chromium.launch(headless=False)
    # 新建页面
    page = browser.new_page()
    # 访问网页
    page.goto(&quot;https://www.baidu.com&quot;)

    # 1. 输入并搜索（定位输入框，输入内容）
    page.locator(&quot;#kw&quot;).fill(&quot;Python Playwright&quot;)
    # 点击搜索按钮
    page.locator(&quot;#su&quot;).click()

    # 2. 等待页面加载并提取数据（等待标题出现）
    page.wait_for_selector(&quot;h3&quot;)
    # 提取所有搜索结果标题
    titles = page.locator(&quot;h3&quot;).all_text_contents()
    print(&quot;前5个搜索结果：&quot;)
    for title in titles[:5]:
        print(title)

    # 关闭浏览器
    browser.close()</code></pre>
<h5>核心优势（对比传统爬虫/自动化工具）</h5>
<ol>
<li>能爬取<strong>动态渲染页面</strong>（如需要登录、滚动加载、JS 渲染的内容），解决 Requests 无法处理的场景。</li>
<li>内置<strong>自动等待</strong>：无需手动设置 time.sleep()，会等待元素加载完成后再操作，稳定性更高。</li>
<li>支持<strong>截图/录屏</strong>：<code>page.screenshot(path=&quot;baidu.png&quot;)</code> 可保存页面截图，便于调试。</li>
</ol>
<h3>五、其他常用库（快速了解）</h3>
<table>
<thead>
<tr>
<th>库名</th>
<th>核心用途</th>
<th>安装命令</th>
</tr>
</thead>
<tbody>
<tr>
<td>Scikit-learn</td>
<td>机器学习（分类、回归、聚类）</td>
<td><code>pip install scikit-learn</code></td>
</tr>
<tr>
<td>TensorFlow/PyTorch</td>
<td>深度学习（神经网络）</td>
<td><code>pip install tensorflow</code> / <code>pip install torch</code></td>
</tr>
<tr>
<td>Flask/Django</td>
<td>Web 开发（轻量/全栈框架）</td>
<td><code>pip install flask</code> / <code>pip install django</code></td>
</tr>
<tr>
<td>Pillow</td>
<td>图片处理（裁剪、滤镜、格式转换）</td>
<td><code>pip install pillow</code></td>
</tr>
<tr>
<td>PyAutoGUI</td>
<td>键鼠自动化（模拟点击、输入）</td>
<td><code>pip install pyautogui</code></td>
</tr>
</tbody>
</table>
<h4>总结</h4>
<ol>
<li><strong>基础核心库</strong>：NumPy 是数值计算基石，Pandas 是数据处理核心，二者是数据分析的必备组合。</li>
<li><strong>可视化库</strong>：Matplotlib 是基础，Seaborn 更适合统计可视化，优先掌握折线图、柱状图、热力图等常用图表。</li>
<li><strong>实用工具库</strong>：基础爬虫用 Requests+BeautifulSoup4 处理静态页面，Playwright 适配动态页面/网页自动化；os/datetime/OpenPyXL 覆盖日常文件、系统、时间和 Excel 操作场景。</li>
</ol>

Python 学习笔记：常用核心库简介

<p>
    <i class="icon icon--date"></i> 2025.9.20
</p>
<p>
  <i class="icon icon--flag"></i> 佛山潭洲国际会展中心
</p>
<p>
  <i class="icon icon--rainy"></i> 雨
</p>
<div class="preface">
网上得知佛山举办改装展，立刻前往展馆。虽然下着大雨，但并不影响我逛展会的热情。
</div>
<h3>◉ 模型展区</h3>
<p>国内品牌齐聚，微缩场景细节拉满，氛围超热烈。其中网上大名鼎鼎的“火车长鸣”的展区人气最高。</p>
<div class="section-title">火车长鸣展区</div>
<div class="image-list banner">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/11.png" alt="">
    </div>
</div>
<div class="image-list col-3">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/1.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/10.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/14.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/15.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/17.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/18.png" alt="">
    </div>
</div>
<div class="section-title">MiniCity 展区</div>
<div class="image-list banner">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/16.png" alt="">
    </div>
</div>
<div class="image-list col-5">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/13.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/19.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/20.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/21.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/24.png" alt="">
    </div>
</div>
<div class="divider"></div>
<h3>◉ 改装车展区</h3>
<p>主馆超 2000 台改装车集结，JDM、欧系超跑、宽体改装全覆盖。外场漂移赛轮胎冒烟、引擎轰鸣，还有港车北上车队交流，文化氛围拉满，视觉和听觉双重震撼。</p>
<div class="image-list two-banner">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/7.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/8.png" alt="">
    </div>
</div>
<div class="image-list col-3">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/5.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/6.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/2.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/3.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/4.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/9.png" alt="">
    </div>
</div>
<div class="blank"></div>
<div class="image-list two-banner">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/25.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/26.png" alt="">
    </div>
</div>
<div class="image-list col-3">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/12.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/23.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/27.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/28.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/29.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山改装展/30.png" alt="">
    </div>
</div>
<div class="divider"></div>
<h3>◉ 纪念品</h3>
<div class="section-title">MiniCity | 苏州金龙.海格 | N 比例</div>
<div class="image-list banner">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_3/8.png" alt="">
    </div>
</div>
<div class="image-list two-banner">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_3/2.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_3/3.png" alt="">
    </div>
</div>
<div class="image-list two-banner">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_3/4.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_3/5.png" alt="">
    </div>
</div>
<div class="image-list col-2">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_3/6.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/收藏品/Bus_3/7.png" alt="">
    </div>
</div>

2025 佛山改装展

<p>作为从 Vue 1.0 一路使用过来的开发者，Vue 3.0 并非简单的版本迭代，而是在核心架构、性能、开发体验上的全面升级，同时兼容了 2.x 的大部分核心思想，既保留了我们熟悉的开发范式，又解决了 2.x 长期存在的痛点。以下从核心架构、语法特性、性能优化、工程化等维度，结合 2.x 对比梳理关键变化。</p>
<h3>一、核心架构：从 Options API 到 Composition API</h3>
<h4>1. Vue 2.x：Options API 为主</h4>
<p>Vue 2.x 采用「选项式 API」，将代码按 <code>data</code>、<code>methods</code>、<code>computed</code>、<code>watch</code>、<code>生命周期钩子</code> 等选项划分，优点是上手简单，但存在明显痛点：</p>
<ul>
<li>逻辑碎片化：一个业务逻辑（如「用户登录状态管理」）的代码会分散在 <code>data</code>（状态）、<code>methods</code>（方法）、<code>watch</code>（监听）、<code>mounted</code>（初始化）等多个选项中，组件越大，逻辑越难追踪；</li>
<li>代码复用受限：mixins 是主要复用方式，但存在命名冲突、来源不清晰、逻辑依赖隐晦的问题；</li>
<li>TypeScript 支持薄弱：Options API 天生不契合 TS 的类型推导，需要额外的类型声明，开发体验差。</li>
</ul>
<h4>2. Vue 3.0：Composition API（组合式 API）+ 保留 Options API</h4>
<p>Vue 3.0 推出「组合式 API」，核心是 <code>setup</code> 函数（组件的入口），允许按<strong>业务逻辑维度</strong>组织代码，而非按选项类型：</p>
<pre><code class="lang-vue language-vue vue">
&lt;template&gt;

&lt;div&gt;{{ count }}&lt;/div&gt;
  &lt;button @click=&quot;increment&quot;&gt;+1&lt;/button&gt;
&lt;/template&gt;

&lt;script setup&gt;
// Vue 3.0 组合式 API（&lt;script setup&gt; 语法糖）
import { ref, computed, onMounted } from &#039;vue&#039;

// 状态定义（替代 2.x 的 data）
const count = ref(0)

// 方法定义（替代 2.x 的 methods）
const increment = () =&gt; {
  count.value++
}

// 计算属性（替代 2.x 的 computed）
const doubleCount = computed(() =&gt; count.value * 2)

// 生命周期（替代 2.x 的 mounted）
onMounted(() =&gt; {
  console.log(&#039;组件挂载完成，count 初始值：&#039;, count.value)
})
&lt;/script&gt;</code></pre>
<p><strong>核心优势</strong>：</p>
<ul>
<li>逻辑聚合：一个业务逻辑的所有代码（状态、方法、监听、生命周期）可集中写在一处，组件结构更清晰；</li>
<li>灵活复用：通过「组合函数（Composables）」复用逻辑（如 <code>useUser()</code>、<code>useRequest()</code>），替代 mixins，解决命名冲突和依赖问题；</li>
<li>完美支持 TS：基于函数式的写法天然契合 TS 类型推导，无需额外声明即可获得完整的类型提示。</li>
</ul>
<p><strong>兼容说明</strong>：</p>
<ul>
<li>Vue 3.0 完全保留 Options API，2.x 的代码可直接迁移（仅需少量适配），支持「渐进式升级」—— 既可以在老组件中继续用 Options API，也可以在新组件中用 Composition API。</li>
</ul>
<h3>二、响应式系统：从 Object.defineProperty 到 Proxy</h3>
<h4>1. Vue 2.x：响应式的痛点</h4>
<p>Vue 2.x 基于 <code>Object.defineProperty</code> 实现响应式，存在天然限制：</p>
<ul>
<li>无法监听数组下标修改（如 <code>arr[0] = 1</code>）和数组长度修改（如 <code>arr.length = 0</code>），需通过 <code>Vue.set/this.$set</code> 或数组变异方法（<code>push/splice</code>）触发更新；</li>
<li>无法监听对象新增属性/删除属性（如 <code>this.obj.newKey = 1</code>），同样需要 <code>Vue.set/this.$delete</code>；</li>
<li>响应式初始化时需要递归遍历对象，性能随对象层级加深下降。</li>
</ul>
<h4>2. Vue 3.0：Proxy 重构响应式</h4>
<p>Vue 3.0 改用 ES6 的 <code>Proxy</code> 实现响应式，彻底解决上述问题：</p>
<ul>
<li>原生支持监听数组下标/长度修改、对象新增/删除属性，无需 <code>$set/$delete</code>；</li>
<li>非侵入式：无需修改原对象，而是代理对象，初始化时无需递归遍历（懒代理，访问属性时才递归），性能大幅提升；</li>
<li>支持 <code>Ref</code> 和 <code>Reactive</code> 两种响应式方式：
<ul>
<li><code>ref</code>：用于基础类型（字符串、数字等），通过 <code>.value</code> 访问（模板中自动解包，无需 <code>.value</code>）；</li>
<li><code>reactive</code>：用于对象/数组，返回代理对象，直接访问属性即可。</li>
</ul></li>
</ul>
<p><strong>示例对比</strong>：</p>
<pre><code class="lang-javascript language-javascript javascript">// Vue 2.x
export default {
  data() {
    return {
      arr: [1, 2, 3],
      obj: { name: &#039;Vue2&#039; }
    }
  },
  methods: {
    updateData() {
      // 无效：无法监听数组下标修改
      this.arr[0] = 100
      // 有效：需用 $set
      this.$set(this.arr, 0, 100)

      // 无效：无法监听对象新增属性
      this.obj.age = 3
      // 有效：需用 $set
      this.$set(this.obj, &#039;age&#039;, 3)
    }
  }
}

// Vue 3.0（Composition API）
import { ref, reactive } from &#039;vue&#039;
const arr = ref([1, 2, 3])
const obj = reactive({ name: &#039;Vue3&#039; })

const updateData = () =&gt; {
  // 有效：原生支持数组下标修改
  arr.value[0] = 100
  // 有效：原生支持对象新增属性
  obj.age = 3
}</code></pre>
<h3>三、性能优化：体积、渲染、编译全方位提升</h3>
<h4>1. 体积更小</h4>
<ul>
<li>Vue 2.x 运行时体积约 22KB（gzip）；</li>
<li>Vue 3.0 通过「树形摇树（Tree-shaking）」重构核心代码，仅引入使用的功能（如仅用响应式、不用编译器），最小体积约 10KB（gzip），体积减少 50% 以上。</li>
</ul>
<h4>2. 渲染更快</h4>
<ul>
<li>虚拟 DOM 重构：Vue 3.0 优化了虚拟 DOM 的生成和对比算法，引入「静态标记」—— 对模板中不变的节点（如纯文本、静态标签）做标记，对比时直接跳过，渲染性能提升约 55%；</li>
<li>编译优化：Vue 3.0 的模板编译器会提前分析模板结构，生成更高效的渲染函数，更新性能提升约 133%。</li>
</ul>
<h4>3. 内存占用更低</h4>
<p>Vue 3.0 优化了组件实例的内存占用，同场景下内存使用减少约 50%。</p>
<h3>四、其他关键变化（对比 Vue 2.x）</h3>
<h4>1. 生命周期钩子</h4>
<p>Vue 3.0 保留了 2.x 的生命周期概念，但命名略有调整（Composition API 中），且新增 <code>setup</code> 替代 <code>beforeCreate</code> 和 <code>created</code>：</p>
<table>
<thead>
<tr>
<th>Vue 2.x</th>
<th>Vue 3.0（Composition API）</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>beforeCreate</td>
<td>setup（开始）</td>
<td>setup 执行时，组件实例未创建</td>
</tr>
<tr>
<td>created</td>
<td>setup（结束）</td>
<td>setup 执行完，组件实例已创建</td>
</tr>
<tr>
<td>beforeMount</td>
<td>onBeforeMount</td>
<td>挂载前</td>
</tr>
<tr>
<td>mounted</td>
<td>onMounted</td>
<td>挂载后</td>
</tr>
<tr>
<td>beforeUpdate</td>
<td>onBeforeUpdate</td>
<td>更新前</td>
</tr>
<tr>
<td>updated</td>
<td>onUpdated</td>
<td>更新后</td>
</tr>
<tr>
<td>beforeDestroy</td>
<td>onBeforeUnmount</td>
<td>卸载前（命名更语义化）</td>
</tr>
<tr>
<td>destroyed</td>
<td>onUnmounted</td>
<td>卸载后（命名更语义化）</td>
</tr>
</tbody>
</table>
<h4>2. 模板语法</h4>
<ul>
<li>支持多根节点：Vue 2.x 模板要求唯一根节点，3.0 支持多根节点（Fragment），无需包裹 `
<div>`；</div></li>
<li>
<p>更灵活的 v-model：Vue 2.x 中 <code>v-model</code> 本质是 <code>value</code> + <code>input</code> 事件，3.0 支持自定义绑定属性和事件，且支持多个 v-model：</p>
<pre><code class="lang-vue language-vue vue">&lt;!-- Vue 2.x：仅能绑定一个 v-model，且固定 value/input --&gt;
&lt;Child v-model=&quot;name&quot; /&gt;

&lt;!-- Vue 3.0：支持多个 v-model，自定义属性和事件 --&gt;
&lt;Child v-model:name=&quot;name&quot; v-model:age=&quot;age&quot; /&gt;</code></pre>
</li>
<li>移除 <code>filter</code>：Vue 3.0 废弃了 2.x 的 <code>filter</code> 过滤器，推荐用计算属性或方法替代（减少 API 复杂度）。</li>
</ul>
<h4>3. 全局 API 调整</h4>
<p>Vue 2.x 的全局 API（如 <code>Vue.component</code>、<code>Vue.directive</code>）会污染全局环境，3.0 改为「实例化 API」：</p>
<pre><code class="lang-javascript language-javascript javascript">// Vue 2.x
import Vue from &#039;vue&#039;
Vue.component(&#039;MyComponent&#039;, { /* ... */ })
Vue.directive(&#039;my-dir&#039;, { /* ... */ })
new Vue({ el: &#039;#app&#039; })

// Vue 3.0
import { createApp } from &#039;vue&#039;
const app = createApp({ /* 根组件 */ })
app.component(&#039;MyComponent&#039;, { /* ... */ })
app.directive(&#039;my-dir&#039;, { /* ... */ })
app.mount(&#039;#app&#039;)</code></pre>
<p>优势：多个 Vue 实例可独立配置，避免全局配置冲突（如多应用嵌入场景）。</p>
<h4>4. 废弃/不推荐的特性</h4>
<ul>
<li>废弃 <code>Vue.prototype</code>：改用 <code>app.config.globalProperties</code> 挂载全局属性；</li>
<li>废弃 <code>$on/$off/$once</code>：移除实例事件总线，推荐用第三方库（如 mitt）替代；</li>
<li>不推荐 <code>filters</code>：用计算属性/方法替代；</li>
<li>不推荐 <code>mixins</code>：用 Composition API 的组合函数替代。</li>
</ul>
<h3>五、迁移建议（从 Vue 2.x 到 3.0）</h3>
<ol>
<li><strong>渐进式迁移</strong>：先保留 Options API，逐步在新功能中使用 Composition API，降低迁移成本；</li>
<li><strong>工具适配</strong>：升级脚手架到 Vite（Vue 3.0 推荐）或 Vue CLI 5+，安装 <code>@vue/compat</code> 兼容包，可临时兼容 2.x 代码；</li>
<li><strong>重点检查</strong>：
<ul>
<li>替换 <code>Vue.set/$set</code>、<code>Vue.delete/$delete</code>（3.0 无需）；</li>
<li>调整生命周期钩子（如 <code>beforeDestroy</code> → <code>onBeforeUnmount</code>）；</li>
<li>替换 <code>filter</code> 为计算属性/方法；</li>
</ul></li>
<li><strong>TypeScript 接入</strong>：新组件建议用 <code>&lt;script setup lang=&quot;ts&quot;&gt;</code>，充分利用 3.0 的 TS 优势。</li>
</ol>
<hr />
<h3>总结</h3>
<ol>
<li><strong>核心架构</strong>：Vue 3.0 的 Composition API 解决了 2.x Options API 逻辑碎片化、复用难、TS 支持差的问题，同时兼容 2.x 写法，支持渐进式升级；</li>
<li><strong>响应式系统</strong>：基于 Proxy 重构，彻底解决 2.x <code>Object.defineProperty</code> 无法监听数组/对象新增属性的痛点，性能和易用性大幅提升；</li>
<li><strong>性能与体验</strong>：体积更小、渲染更快，模板语法更灵活（多根节点、多 v-model），全局 API 更合理，是对 Vue 2.x 核心痛点的全面优化，同时保留了 Vue 一贯的「易用、渐进式」设计理念。</li>
</ol>

Vue 3.0 核心特性技术日志

<p>
    <i class="icon icon--date"></i> 2025-03-22
</p>
<p>
    <i class="icon icon--flag"></i> 文华公园
</p>
<p>
    <i class="icon icon--sunny"></i> 晴
</p>
<div class="preface">
    ✨ 今年是我来佛山定居的第十年，所以去参加了50km徒步纪念一下。一大早就起床，吃完早餐就骑电驴向集结地文华公园出发。
</div>
<figure class="figure-h">
  <img data-src="//static.hezhiyi.com/images/blog/2025/佛山五十公里徒步_禅城线/01.png" alt="">
</figure>
<h3>起点：文华公园</h3>
<p><code>08:24 出发</code></p>
<p>现场人山人海。之前我还想走50公里不是普通的运动量，参加的人应该不多，结果发现上到满头白发的老人、下到三岁小孩都来参加，看来我低估了大家对这个活动的积极性。</p>
<p>好，从此刻正式开始！</p>
<div class="image-list col-2">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山五十公里徒步_禅城线/02.jpg" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山五十公里徒步_禅城线/03.jpg" alt="">
    </div>
</div>
<h3>第一签：升平里</h3>
<p><code>09:53</code>・<code>行程：5KM</code></p>
<p>开局像过年游花市，大家都是一个挨一个，沿途的路都围蔽了。就这样慢吞吞地走了1.5小时。心想，这样走岂不是晚上十点都走不完？！来到升平里人更多了（是我见过这个地方人最多的一次），赶紧找签到点盖章离开。</p>
<h3>第二签：欧洲工业园C区</h3>
<p><code>11:48</code>・<code>行程：12.8KM</code></p>
<p>这段感觉人少了不少，原因其实很多人只是为了打个卡发发朋友圈，（毕竟 5km 对现在的人还是极限）。太阳也出来营业了，还好沿途绿道大树也比较多。这一段是考验耐心的，因为要经过一片老旧的工业区，所以风景一般，路边的大货车经过会扬起一片灰尘&#8230;&#8230;</p>
<figure class="figure-v">
  <img data-src="//static.hezhiyi.com/images/blog/2025/佛山五十公里徒步_禅城线/04.jpg" alt="">
</figure>
<h3>第三签：城发悦城峯境</h3>
<p><code>13:24</code>・<code>行程：17.8KM</code></p>
<p>沿汾江河边都是新打造的绿道，风景很不错。沿途都是卖小吃、饮料的小贩。也经过了我一直想去的王借岗公园，又帮我在百度地图点亮了一个片区。</p>
<figure class="figure-v">
  <img data-src="//static.hezhiyi.com/images/blog/2025/佛山五十公里徒步_禅城线/05.jpg" alt="">
</figure>
<h3>第四签：绿岛湖国际中心</h3>
<p><code>14:29</code>・<code>行程：20.5KM</code></p>
<p>距离不远，但人走了一个上午已经有点累，所以走到绿岛湖就在湖边休整了20分钟。在这里汇合身穿浅蓝色衣服的&#8221;三水线&#8221;驴友，这些都是大神人，因为他们的线路比我们多出14km，也就是说别人一大早7点就已经出发，并且走得很快。其实禅城线算是“作弊”线路，因为它全场是36km，是全部线路中最短的。</p>
<h3>第五签：智慧公园</h3>
<p><code>15:25</code>・<code>行程：24.5KM</code></p>
<p>这段就开始拼耐力了，阳光猛烈，大树比较少，脚步也渐渐慢下来。不过令我意外的是智慧公园原来很漂亮，又找多了一个休闲的地方。  </p>
<h3>第六签：青年公园</h3>
<p><code>16:46</code>・<code>行程：30.5KM</code></p>
<p>如果认真计算距离和时间，就发现我速度快了很多。不，我没作弊（已经看到很多人骑共享单车跑了），其实原因是身边的队友也受不了骑车去。我只是自己发挥真正的实力 ^_^。PS沿线的公交线路都挤满了人，其实这不是比赛，尽力而为就好。</p>
<div class="image-list col-2">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山五十公里徒步_禅城线/06.jpg" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山五十公里徒步_禅城线/07.jpg" alt="">
    </div>
</div>
<h3>终点：世纪莲体育中心（18:12  |  36KM）</h3>
<p><code>18:12</code>・<code>全程：36KM</code></p>
<p>突然想起十年前那次30公里徒步，走完整个人都废了，所以这次出发前一直怀疑自己到底行不行。现在看来，身体确实比以前能扛了，但更关键的是——只要咬咬牙，好像也没什么走不完的路。</p>
<div class="image-list col-2">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山五十公里徒步_禅城线/08.jpg" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/佛山五十公里徒步_禅城线/09.jpg" alt="">
    </div>
</div>

2025 佛山五十公里徒步・禅城线

<p>早上我和家人去了广州动物园，下午回来赶上了11号线的开通首日，顺便体验一下新线路。</p>
<p>列车进站的时候，大家都掏出手机拍照，我也赶紧拍了几张发朋友圈。11号线的站台和车厢都很大，不愧为A8列车，坐着特别舒服，相比广州其它线路，绝对的王者。而且它是城区环线，所以去哪里换乘都方便。</p>
<p>到了中医学院站，发现人还挺多的，大家都想第一时间体验新线路，而且这个站也是「大站」，以后可以换乘12号线。站台设计很有特色，融入了很多中医药文化的元素。</p>
<div class="image-list two-banner">
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/广州11号线开通/01.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/广州11号线开通/02.png" alt="">
    </div>
</div>
<div class="image-list col-3">
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/广州11号线开通/03.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/广州11号线开通/04.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/广州11号线开通/05.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/广州11号线开通/06.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/广州11号线开通/07.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/广州11号线开通/08.png" alt="">
    </div>
</div>

广州 11 号线开通首日体验

<div class="preface">
    MIDI 音符代码是用于表示音符的数字系统，范围从0到127，对应不同的音高和八度。具体如下：
</div>
<ol>
<li>
<p><strong>音符编号</strong>：每个音符对应一个唯一的编号，例如：</p>
<ul>
<li>C4（中央C）的编号为 60。</li>
<li>C5 的编号为 72。</li>
</ul>
</li>
<li>
<p><strong>音高与编号</strong>：</p>
<ul>
<li>编号 0 对应 C-1（最低音）。</li>
<li>编号 127 对应 G9（最高音）。</li>
</ul>
</li>
<li>
<p><strong>八度划分</strong>：</p>
<ul>
<li>每增加12，编号提高一个八度。例如，C4 为 60，C5 为 72。</li>
</ul>
</li>
<li>
<p><strong>半音关系</strong>：</p>
<ul>
<li>相邻编号相差一个半音。例如，C4 为 60，C#4/Db4 为 61。</li>
</ul>
</li>
<li>
<p><strong>常用音符示例</strong>：</p>
<ul>
<li>C4: 60</li>
<li>D4: 62</li>
<li>E4: 64</li>
<li>F4: 65</li>
<li>G4: 67</li>
<li>A4: 69</li>
<li>B4: 71</li>
<li>C5: 72</li>
</ul>
</li>
<li>
<p><strong>应用</strong>：</p>
<ul>
<li>MIDI 音符代码用于音乐软件、硬件和数字乐器中，控制音符的播放。</li>
</ul>
</li>
</ol>
<p>附表：</p>
<table>
<thead>
<tr>
<th>编号</th>
<th>音符代码（二进制码）</th>
<th>音符代码（十六进制码）</th>
<th>所在音阶</th>
<th>音调</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0000000</td>
<td>00</td>
<td>-1</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>0000001</td>
<td>01</td>
<td>-1</td>
<td>C#</td>
</tr>
<tr>
<td>2</td>
<td>0000010</td>
<td>02</td>
<td>-1</td>
<td>D</td>
</tr>
<tr>
<td>3</td>
<td>0000011</td>
<td>03</td>
<td>-1</td>
<td>D#</td>
</tr>
<tr>
<td>4</td>
<td>0000100</td>
<td>04</td>
<td>-1</td>
<td>E</td>
</tr>
<tr>
<td>5</td>
<td>0000101</td>
<td>05</td>
<td>-1</td>
<td>F</td>
</tr>
<tr>
<td>6</td>
<td>0000110</td>
<td>06</td>
<td>-1</td>
<td>F#</td>
</tr>
<tr>
<td>7</td>
<td>0000111</td>
<td>07</td>
<td>-1</td>
<td>G</td>
</tr>
<tr>
<td>8</td>
<td>0001000</td>
<td>08</td>
<td>-1</td>
<td>G#</td>
</tr>
<tr>
<td>9</td>
<td>0001001</td>
<td>09</td>
<td>-1</td>
<td>A</td>
</tr>
<tr>
<td>10</td>
<td>0001010</td>
<td>0A</td>
<td>-1</td>
<td>A#</td>
</tr>
<tr>
<td>11</td>
<td>0001011</td>
<td>0B</td>
<td>-1</td>
<td>B</td>
</tr>
<tr>
<td>12</td>
<td>0001100</td>
<td>0C</td>
<td>0</td>
<td>C</td>
</tr>
<tr>
<td>13</td>
<td>0001101</td>
<td>0D</td>
<td>0</td>
<td>C#</td>
</tr>
<tr>
<td>14</td>
<td>0001110</td>
<td>0E</td>
<td>0</td>
<td>D</td>
</tr>
<tr>
<td>15</td>
<td>0001111</td>
<td>0F</td>
<td>0</td>
<td>D#</td>
</tr>
<tr>
<td>16</td>
<td>0010000</td>
<td>10</td>
<td>0</td>
<td>E</td>
</tr>
<tr>
<td>17</td>
<td>0010001</td>
<td>11</td>
<td>0</td>
<td>F</td>
</tr>
<tr>
<td>18</td>
<td>0010010</td>
<td>12</td>
<td>0</td>
<td>F#</td>
</tr>
<tr>
<td>19</td>
<td>0010011</td>
<td>13</td>
<td>0</td>
<td>G</td>
</tr>
<tr>
<td>20</td>
<td>0010100</td>
<td>14</td>
<td>0</td>
<td>G#</td>
</tr>
<tr>
<td>21</td>
<td>0010101</td>
<td>15</td>
<td>0</td>
<td>A</td>
</tr>
<tr>
<td>22</td>
<td>0010110</td>
<td>16</td>
<td>0</td>
<td>A#</td>
</tr>
<tr>
<td>23</td>
<td>0010111</td>
<td>17</td>
<td>0</td>
<td>B</td>
</tr>
<tr>
<td>24</td>
<td>0011000</td>
<td>18</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>25</td>
<td>0011001</td>
<td>19</td>
<td>1</td>
<td>C#</td>
</tr>
<tr>
<td>26</td>
<td>0011010</td>
<td>1A</td>
<td>1</td>
<td>D</td>
</tr>
<tr>
<td>27</td>
<td>0011011</td>
<td>1B</td>
<td>1</td>
<td>D#</td>
</tr>
<tr>
<td>28</td>
<td>0011100</td>
<td>1C</td>
<td>1</td>
<td>E</td>
</tr>
<tr>
<td>29</td>
<td>0011101</td>
<td>1D</td>
<td>1</td>
<td>F</td>
</tr>
<tr>
<td>30</td>
<td>0011110</td>
<td>1E</td>
<td>1</td>
<td>F#</td>
</tr>
<tr>
<td>31</td>
<td>0011111</td>
<td>1F</td>
<td>1</td>
<td>G</td>
</tr>
<tr>
<td>32</td>
<td>0100000</td>
<td>20</td>
<td>1</td>
<td>G#</td>
</tr>
<tr>
<td>33</td>
<td>0100001</td>
<td>21</td>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>34</td>
<td>0100010</td>
<td>22</td>
<td>1</td>
<td>A#</td>
</tr>
<tr>
<td>35</td>
<td>0100011</td>
<td>23</td>
<td>1</td>
<td>B</td>
</tr>
<tr>
<td>36</td>
<td>0100100</td>
<td>24</td>
<td>2</td>
<td>C</td>
</tr>
<tr>
<td>37</td>
<td>0100101</td>
<td>25</td>
<td>2</td>
<td>C#</td>
</tr>
<tr>
<td>38</td>
<td>0100110</td>
<td>26</td>
<td>2</td>
<td>D</td>
</tr>
<tr>
<td>39</td>
<td>0100111</td>
<td>27</td>
<td>2</td>
<td>D#</td>
</tr>
<tr>
<td>40</td>
<td>0101000</td>
<td>28</td>
<td>2</td>
<td>E</td>
</tr>
<tr>
<td>41</td>
<td>0101001</td>
<td>29</td>
<td>2</td>
<td>F</td>
</tr>
<tr>
<td>42</td>
<td>0101010</td>
<td>2A</td>
<td>2</td>
<td>F#</td>
</tr>
<tr>
<td>43</td>
<td>0101011</td>
<td>2B</td>
<td>2</td>
<td>G</td>
</tr>
<tr>
<td>44</td>
<td>0101100</td>
<td>2C</td>
<td>2</td>
<td>G#</td>
</tr>
<tr>
<td>45</td>
<td>0101101</td>
<td>2D</td>
<td>2</td>
<td>A</td>
</tr>
<tr>
<td>46</td>
<td>0101110</td>
<td>2E</td>
<td>2</td>
<td>A#</td>
</tr>
<tr>
<td>47</td>
<td>0101111</td>
<td>2F</td>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>48</td>
<td>0110000</td>
<td>30</td>
<td>3</td>
<td>C</td>
</tr>
<tr>
<td>49</td>
<td>0110001</td>
<td>31</td>
<td>3</td>
<td>C#</td>
</tr>
<tr>
<td>50</td>
<td>0110010</td>
<td>32</td>
<td>3</td>
<td>D</td>
</tr>
<tr>
<td>51</td>
<td>0110011</td>
<td>33</td>
<td>3</td>
<td>D#</td>
</tr>
<tr>
<td>52</td>
<td>0110100</td>
<td>34</td>
<td>3</td>
<td>E</td>
</tr>
<tr>
<td>53</td>
<td>0110101</td>
<td>35</td>
<td>3</td>
<td>F</td>
</tr>
<tr>
<td>54</td>
<td>0110110</td>
<td>36</td>
<td>3</td>
<td>F#</td>
</tr>
<tr>
<td>55</td>
<td>0110111</td>
<td>37</td>
<td>3</td>
<td>G</td>
</tr>
<tr>
<td>56</td>
<td>0111000</td>
<td>38</td>
<td>3</td>
<td>G#</td>
</tr>
<tr>
<td>57</td>
<td>0111001</td>
<td>39</td>
<td>3</td>
<td>A</td>
</tr>
<tr>
<td>58</td>
<td>0111010</td>
<td>3A</td>
<td>3</td>
<td>A#</td>
</tr>
<tr>
<td>59</td>
<td>0111011</td>
<td>3B</td>
<td>3</td>
<td>B</td>
</tr>
<tr>
<td>60</td>
<td>0111100</td>
<td>3C</td>
<td>4</td>
<td>C</td>
</tr>
<tr>
<td>61</td>
<td>0111101</td>
<td>3D</td>
<td>4</td>
<td>C#</td>
</tr>
<tr>
<td>62</td>
<td>0111110</td>
<td>3E</td>
<td>4</td>
<td>D</td>
</tr>
<tr>
<td>63</td>
<td>0111111</td>
<td>3F</td>
<td>4</td>
<td>D#</td>
</tr>
<tr>
<td>64</td>
<td>1000000</td>
<td>40</td>
<td>4</td>
<td>E</td>
</tr>
<tr>
<td>65</td>
<td>1000001</td>
<td>41</td>
<td>4</td>
<td>F</td>
</tr>
<tr>
<td>66</td>
<td>1000010</td>
<td>42</td>
<td>4</td>
<td>F#</td>
</tr>
<tr>
<td>67</td>
<td>1000011</td>
<td>43</td>
<td>4</td>
<td>G</td>
</tr>
<tr>
<td>68</td>
<td>1000100</td>
<td>44</td>
<td>4</td>
<td>G#</td>
</tr>
<tr>
<td>69</td>
<td>1000101</td>
<td>45</td>
<td>4</td>
<td>A</td>
</tr>
<tr>
<td>70</td>
<td>1000110</td>
<td>46</td>
<td>4</td>
<td>A#</td>
</tr>
<tr>
<td>71</td>
<td>1000111</td>
<td>47</td>
<td>4</td>
<td>B</td>
</tr>
<tr>
<td>72</td>
<td>1001000</td>
<td>48</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>73</td>
<td>1001001</td>
<td>49</td>
<td>5</td>
<td>C#</td>
</tr>
<tr>
<td>74</td>
<td>1001010</td>
<td>4A</td>
<td>5</td>
<td>D</td>
</tr>
<tr>
<td>75</td>
<td>1001011</td>
<td>4B</td>
<td>5</td>
<td>D#</td>
</tr>
<tr>
<td>76</td>
<td>1001100</td>
<td>4C</td>
<td>5</td>
<td>E</td>
</tr>
<tr>
<td>77</td>
<td>1001101</td>
<td>4D</td>
<td>5</td>
<td>F</td>
</tr>
<tr>
<td>78</td>
<td>1001110</td>
<td>4E</td>
<td>5</td>
<td>F#</td>
</tr>
<tr>
<td>79</td>
<td>1001111</td>
<td>4F</td>
<td>5</td>
<td>G</td>
</tr>
<tr>
<td>80</td>
<td>1010000</td>
<td>50</td>
<td>5</td>
<td>G#</td>
</tr>
<tr>
<td>81</td>
<td>1010001</td>
<td>51</td>
<td>5</td>
<td>A</td>
</tr>
<tr>
<td>82</td>
<td>1010010</td>
<td>52</td>
<td>5</td>
<td>A#</td>
</tr>
<tr>
<td>83</td>
<td>1010011</td>
<td>53</td>
<td>5</td>
<td>B</td>
</tr>
<tr>
<td>84</td>
<td>1010100</td>
<td>54</td>
<td>6</td>
<td>C</td>
</tr>
<tr>
<td>85</td>
<td>1010101</td>
<td>55</td>
<td>6</td>
<td>C#</td>
</tr>
<tr>
<td>86</td>
<td>1010110</td>
<td>56</td>
<td>6</td>
<td>D</td>
</tr>
<tr>
<td>87</td>
<td>1010111</td>
<td>57</td>
<td>6</td>
<td>D#</td>
</tr>
<tr>
<td>88</td>
<td>1011000</td>
<td>58</td>
<td>6</td>
<td>E</td>
</tr>
<tr>
<td>89</td>
<td>1011001</td>
<td>59</td>
<td>6</td>
<td>F</td>
</tr>
<tr>
<td>90</td>
<td>1011010</td>
<td>5A</td>
<td>6</td>
<td>F#</td>
</tr>
<tr>
<td>91</td>
<td>1011011</td>
<td>5B</td>
<td>6</td>
<td>G</td>
</tr>
<tr>
<td>92</td>
<td>1011100</td>
<td>5C</td>
<td>6</td>
<td>G#</td>
</tr>
<tr>
<td>93</td>
<td>1011101</td>
<td>5D</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>94</td>
<td>1011110</td>
<td>5E</td>
<td>6</td>
<td>A#</td>
</tr>
<tr>
<td>95</td>
<td>1011111</td>
<td>5F</td>
<td>6</td>
<td>B</td>
</tr>
<tr>
<td>96</td>
<td>1100000</td>
<td>60</td>
<td>7</td>
<td>C</td>
</tr>
<tr>
<td>97</td>
<td>1100001</td>
<td>61</td>
<td>7</td>
<td>C#</td>
</tr>
<tr>
<td>98</td>
<td>1100010</td>
<td>62</td>
<td>7</td>
<td>D</td>
</tr>
<tr>
<td>99</td>
<td>1100011</td>
<td>63</td>
<td>7</td>
<td>D#</td>
</tr>
<tr>
<td>100</td>
<td>1100100</td>
<td>64</td>
<td>7</td>
<td>E</td>
</tr>
<tr>
<td>101</td>
<td>1100101</td>
<td>65</td>
<td>7</td>
<td>F</td>
</tr>
<tr>
<td>102</td>
<td>1100110</td>
<td>66</td>
<td>7</td>
<td>F#</td>
</tr>
<tr>
<td>103</td>
<td>1100111</td>
<td>67</td>
<td>7</td>
<td>G</td>
</tr>
<tr>
<td>104</td>
<td>1101000</td>
<td>68</td>
<td>7</td>
<td>G#</td>
</tr>
<tr>
<td>105</td>
<td>1101001</td>
<td>69</td>
<td>7</td>
<td>A</td>
</tr>
<tr>
<td>106</td>
<td>1101010</td>
<td>6A</td>
<td>7</td>
<td>A#</td>
</tr>
<tr>
<td>107</td>
<td>1101011</td>
<td>6B</td>
<td>7</td>
<td>B</td>
</tr>
<tr>
<td>108</td>
<td>1101100</td>
<td>6C</td>
<td>8</td>
<td>C</td>
</tr>
<tr>
<td>109</td>
<td>1101101</td>
<td>6D</td>
<td>8</td>
<td>C#</td>
</tr>
<tr>
<td>110</td>
<td>1101110</td>
<td>6E</td>
<td>8</td>
<td>D</td>
</tr>
<tr>
<td>111</td>
<td>1101111</td>
<td>6F</td>
<td>8</td>
<td>D#</td>
</tr>
<tr>
<td>112</td>
<td>1110000</td>
<td>70</td>
<td>8</td>
<td>E</td>
</tr>
<tr>
<td>113</td>
<td>1110001</td>
<td>71</td>
<td>8</td>
<td>F</td>
</tr>
<tr>
<td>114</td>
<td>1110010</td>
<td>72</td>
<td>8</td>
<td>F#</td>
</tr>
<tr>
<td>115</td>
<td>1110011</td>
<td>73</td>
<td>8</td>
<td>G</td>
</tr>
<tr>
<td>116</td>
<td>1110100</td>
<td>74</td>
<td>8</td>
<td>G#</td>
</tr>
<tr>
<td>117</td>
<td>1110101</td>
<td>75</td>
<td>8</td>
<td>A</td>
</tr>
<tr>
<td>118</td>
<td>1110110</td>
<td>76</td>
<td>8</td>
<td>A#</td>
</tr>
<tr>
<td>119</td>
<td>1110111</td>
<td>77</td>
<td>8</td>
<td>B</td>
</tr>
<tr>
<td>120</td>
<td>1111000</td>
<td>78</td>
<td>9</td>
<td>C</td>
</tr>
<tr>
<td>121</td>
<td>1111001</td>
<td>79</td>
<td>9</td>
<td>C#</td>
</tr>
<tr>
<td>122</td>
<td>1111010</td>
<td>7A</td>
<td>9</td>
<td>D</td>
</tr>
<tr>
<td>123</td>
<td>1111011</td>
<td>7B</td>
<td>9</td>
<td>D#</td>
</tr>
<tr>
<td>124</td>
<td>1111100</td>
<td>7C</td>
<td>9</td>
<td>E</td>
</tr>
<tr>
<td>125</td>
<td>1111101</td>
<td>7D</td>
<td>9</td>
<td>F</td>
</tr>
<tr>
<td>126</td>
<td>1111110</td>
<td>7E</td>
<td>9</td>
<td>F#</td>
</tr>
<tr>
<td>127</td>
<td>1111111</td>
<td>7F</td>
<td>9</td>
<td>G</td>
</tr>
</tbody>
</table>

MIDI 音符代码表

<div class="preface">
    高明，它藏着老巷的烟火、山水的灵秀。这是我对高明一步一脚印的记录，领略这座城每一个角落。
</div>
<h3>
    <i class="icon icon--travel_2"></i> 荷城
</h3>
<p>高明汽车客运站是我暂时去过最大的公交站场，对于公交迷的我是一个胜地。</p>
<p>高明有轨电车，算是遗址吧~反映了一个城市变迁的缩影。</p>
<div class="image-list col-3">
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/荷城_1.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/荷城_5.png" alt="">
    </div>
</div>
<h3>
    <i class="icon icon--travel_1"></i> 西江
</h3>
<p>骑共享电驴游西江是一种享受。</p>
<div class="image-list col-3">
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/荷城_2.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/荷城_4.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/荷城_3.png" alt="">
    </div>
</div>
<h3>
    <i class="icon icon--travel_3"></i> 苏村
</h3>
<p>这个坐落西江，以锦鲤为主题的村落，绝对是来高明必去的打卡地。</p>
<div class="image-list two-banner">
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/苏村_1.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/苏村_2.png" alt="">
    </div>
</div>
<div class="image-list col-4">
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/苏村_3.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/苏村_4.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/苏村_5.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/佛山/高明/苏村_6.png" alt="">
    </div>
</div>

广客双层巴士 GZK6120FS
2026-04-14 14:53

2026 佛山五十公里徒步・顺德线
2026-03-26 12:18

VSCode + Copilot 实战使用
2026-01-08 09:29

Python 学习笔记：常用核心库简介
2025-12-11 09:53

2025 佛山改装展
2025-09-20 15:04

Vue 3.0 核心特性技术日志
2025-05-11 09:42

2025 佛山五十公里徒步・禅城线
2025-03-26 15:34

广州 11 号线开通首日体验
2024-12-28 20:51

MIDI 音符代码表
2024-05-02 16:57

【City Corners】佛山 . 高明
2024-03-18 14:56

广客双层巴士 GZK6120FS2026-04-14 14:53

2026 佛山五十公里徒步・顺德线2026-03-26 12:18

VSCode + Copilot 实战使用2026-01-08 09:29

Python 学习笔记：常用核心库简介2025-12-11 09:53

2025 佛山改装展2025-09-20 15:04

Vue 3.0 核心特性技术日志2025-05-11 09:42

2025 佛山五十公里徒步・禅城线2025-03-26 15:34

广州 11 号线开通首日体验2024-12-28 20:51

MIDI 音符代码表2024-05-02 16:57

【City Corners】佛山 . 高明2024-03-18 14:56