<p>过去我习惯通过 GPT、豆包等网页工具获取 AI 协助，但自从改用 VSCode 搭配 GitHub 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 + GitHub Copilot 实战使用

<p>我近期在使用影刀开发各类自动化流程，发现即便借助影刀的指令体系，深入掌握 Python 第三方库依然至关重要。这些库覆盖了数据处理、可视化、网络请求、自动化等几乎所有编程场景，因此我整理了这份新手入门级的 Python 常用库笔记，包含核心功能、安装方式和极简示例，助力快速上手。</p>
<h2>一、基础必备库</h2>
<h3>1. NumPy（数值计算基础）</h3>
<h4>核心功能</h4>
<ul>
<li>提供高性能的<strong>多维数组（ndarray）</strong> 数据结构，是科学计算的基础。</li>
<li>支持向量化运算、矩阵操作、线性代数、傅里叶变换等数值计算。</li>
<li>比 Python 原生列表快得多，是 Pandas、Matplotlib 等库的底层依赖。</li>
</ul>
<h4>安装</h4>
<pre><code class="lang-bash language-bash bash">pip install numpy</code></pre>
<h4>极简示例</h4>
<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>
<h3>2. Pandas（数据处理与分析）</h3>
<h4>核心功能</h4>
<ul>
<li>提供 <strong>DataFrame（表格型数据结构）</strong> 和 Series（一维序列），完美适配表格数据（如 Excel/CSV）。</li>
<li>支持数据清洗（缺失值、重复值处理）、筛选、分组、合并、透视表等。</li>
<li>是数据分析、数据挖掘的核心工具，能轻松处理几十万甚至百万行数据。</li>
</ul>
<h4>安装</h4>
<pre><code class="lang-bash language-bash bash">pip install pandas</code></pre>
<h4>极简示例</h4>
<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>
<h2>二、数据可视化库</h2>
<h3>1. Matplotlib（基础可视化库）</h3>
<h4>核心功能</h4>
<ul>
<li>Python 最基础的绘图库，支持绘制折线图、柱状图、散点图、直方图等几乎所有基础图表。</li>
<li>高度可定制（标题、坐标轴、颜色、样式等），是其他可视化库（如 Seaborn）的底层。</li>
</ul>
<h4>安装</h4>
<pre><code class="lang-bash language-bash bash">pip install matplotlib</code></pre>
<h4>极简示例</h4>
<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>
<h3>2. Seaborn（高级可视化库）</h3>
<h4>核心功能</h4>
<ul>
<li>基于 Matplotlib 封装，语法更简洁，默认样式更美观。</li>
<li>专注于统计可视化（如箱线图、热力图、小提琴图、配对图），适配 Pandas 的 DataFrame。</li>
</ul>
<h4>安装</h4>
<pre><code class="lang-bash language-bash bash">pip install seaborn</code></pre>
<h4>极简示例</h4>
<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>
<h2>三、网络请求与爬虫库</h2>
<h3>1. Requests（HTTP 请求库）</h3>
<h4>核心功能</h4>
<ul>
<li>替代 Python 原生的 urllib，语法极简，支持 GET/POST 请求、Cookie、Headers、代理等。</li>
<li>是爬虫、调用 API 接口的首选库。</li>
</ul>
<h4>安装</h4>
<pre><code class="lang-bash language-bash bash">pip install requests</code></pre>
<h4>极简示例</h4>
<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>
<h3>2. BeautifulSoup4（网页解析库）</h3>
<h4>核心功能</h4>
<ul>
<li>解析 HTML/XML 页面，提取标签、属性、文本等内容，搭配 Requests 实现爬虫。</li>
<li>支持 CSS 选择器、正则表达式匹配，上手简单。</li>
</ul>
<h4>安装</h4>
<pre><code class="lang-bash language-bash bash">pip install beautifulsoup4</code></pre>
<h4>极简示例</h4>
<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>
<h2>四、自动化与实用工具库</h2>
<h3>1. os &amp; sys（系统交互库，内置）</h3>
<h4>核心功能</h4>
<ul>
<li><code>os</code>：操作文件/目录（创建、删除、遍历、路径拼接）、执行系统命令。</li>
<li><code>sys</code>：获取系统参数（如命令行参数、Python 版本）、控制程序退出等。</li>
<li>无需安装，Python 原生内置。</li>
</ul>
<h4>极简示例</h4>
<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>
<h3>2. datetime（时间处理库，内置）</h3>
<h4>核心功能</h4>
<ul>
<li>处理日期、时间的解析、格式化、加减运算，替代原生 time 库的复杂操作。</li>
<li>无需安装，Python 原生内置。</li>
</ul>
<h4>极简示例</h4>
<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>
<h3>3. OpenPyXL（Excel 操作库）</h3>
<h4>核心功能</h4>
<ul>
<li>读写 Excel 文件（.xlsx 格式），支持单元格样式、公式、合并单元格等。</li>
<li>替代老旧的 xlrd/xlwt，功能更全面。</li>
</ul>
<h4>安装</h4>
<pre><code class="lang-bash language-bash bash">pip install openpyxl</code></pre>
<h4>极简示例</h4>
<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>
<h3>4. Playwright（现代自动化测试/爬虫库）</h3>
<h4>核心功能</h4>
<ul>
<li>由微软开发，支持<strong>无头浏览器</strong>自动化（Chrome、Firefox、Safari 全兼容）。</li>
<li>相比 Selenium 更轻量、速度更快，API 设计更简洁，内置等待机制（无需手动加 sleep）。</li>
<li>可用于网页自动化操作、动态渲染页面爬虫（如 JavaScript 加载的内容）、UI 自动化测试。</li>
<li>支持同步/异步两种调用方式，新手优先学同步版即可。</li>
</ul>
<h4>安装</h4>
<pre><code class="lang-bash language-bash bash"># 安装库
pip install playwright
# 安装浏览器驱动（首次使用必须执行，会下载Chrome/Firefox/Safari驱动）
playwright install</code></pre>
<h4>极简示例</h4>
<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>
<h4>核心优势（对比传统爬虫/自动化工具）</h4>
<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>
<h2>五、其他常用库（快速了解）</h2>
<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>
<h3>总结</h3>
<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>作为从 Vue 1.0 一路使用过来的开发者，Vue 3.0 并非简单的版本迭代，而是在核心架构、性能、开发体验上的全面升级，同时兼容了 2.x 的大部分核心思想，既保留了我们熟悉的开发范式，又解决了 2.x 长期存在的痛点。以下从核心架构、语法特性、性能优化、工程化等维度，结合 2.x 对比梳理关键变化。</p>
<h2>一、核心架构：从 Options API 到 Composition API</h2>
<h3>1. Vue 2.x：Options API 为主</h3>
<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>
<h3>2. Vue 3.0：Composition API（组合式 API）+ 保留 Options API</h3>
<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>：Vue 3.0 完全保留 Options API，2.x 的代码可直接迁移（仅需少量适配），支持「渐进式升级」—— 既可以在老组件中继续用 Options API，也可以在新组件中用 Composition API。</p>
<h2>二、响应式系统：从 Object.defineProperty 到 Proxy</h2>
<h3>1. Vue 2.x：响应式的痛点</h3>
<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>
<h3>2. Vue 3.0：Proxy 重构响应式</h3>
<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>
<h2>三、性能优化：体积、渲染、编译全方位提升</h2>
<h3>1. 体积更小</h3>
<ul>
<li>Vue 2.x 运行时体积约 22KB（gzip）；</li>
<li>Vue 3.0 通过「树形摇树（Tree-shaking）」重构核心代码，仅引入使用的功能（如仅用响应式、不用编译器），最小体积约 10KB（gzip），体积减少 50% 以上。</li>
</ul>
<h3>2. 渲染更快</h3>
<ul>
<li>虚拟 DOM 重构：Vue 3.0 优化了虚拟 DOM 的生成和对比算法，引入「静态标记」—— 对模板中不变的节点（如纯文本、静态标签）做标记，对比时直接跳过，渲染性能提升约 55%；</li>
<li>编译优化：Vue 3.0 的模板编译器会提前分析模板结构，生成更高效的渲染函数，更新性能提升约 133%。</li>
</ul>
<h3>3. 内存占用更低</h3>
<p>Vue 3.0 优化了组件实例的内存占用，同场景下内存使用减少约 50%。</p>
<h2>四、其他关键变化（对比 Vue 2.x）</h2>
<h3>1. 生命周期钩子</h3>
<table>
<thead>
<tr>
<th>Vue 3.0 保留了 2.x 的生命周期概念，但命名略有调整（Composition API 中），且新增 <code>setup</code> 替代 <code>beforeCreate</code> 和 <code>created</code>：</th>
<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>
<h3>2. 模板语法</h3>
<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>
<h3>3. 全局 API 调整</h3>
<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>
<h3>4. 废弃/不推荐的特性</h3>
<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>
<h2>五、迁移建议（从 Vue 2.x 到 3.0）</h2>
<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>今年是我来佛山定居的第十年，所以去参加了50km徒步纪念一下。</p>
<h3>6:30 AM 起床</h3>
<p>一大早就起床，吃完早餐就骑电驴向集结地文华公园出发。</p>
<figure class="figure-v">
  <img data-src="//static.hezhiyi.com/images/blog/2025/0326/01.jpg" alt="">
</figure>
<h3>8:24 AM 起点·文华公园，人山人海</h3>
<p>到现场直接吓懵 —— 人也太多了吧！电视塔下面全是人。之前我还想走50公里不是普通的运动量，参加的人应该不多，结果发现满头白发的老人、三岁小孩都来参加，看来我低估了大家对这个活动的积极性。好，从此刻正式开始！</p>
<figure class="figure-v">
  <img data-src="//static.hezhiyi.com/images/blog/2025/0326/02.jpg" alt="">
</figure>
<h3>09:53 AM 第一签：升平里（5KM）</h3>
<p>开局像过年游花市，大家都是一个挨一个，沿途的路都围蔽了。就这样慢吞吞地走了1.5小时。心想，这样走岂不是晚上十点都走不完？！来到升平里人更多了（是我见过这个地方人最多的一次），赶紧找签到点盖章离开。</p>
<h3>11:48 AM 第二签：欧洲工业园C区（12.8KM）</h3>
<p>这段感觉人少了不少，原因其实很多人只是为了打个卡发发朋友圈，（毕竟 5km 对现在的人还是极限）。太阳也出来营业了，还好沿途绿道大树也比较多。这一段是考验耐心的，因为要经过一片老旧的工业区，所以风景一般，路边的大货车经过会扬起一片灰尘&#8230;&#8230;</p>
<figure class="figure-v">
  <img data-src="//static.hezhiyi.com/images/blog/2025/0326/03.jpg" alt="">
</figure>
<h3>13:24 AM 第三签：城发悦城峯境（17.8KM）</h3>
<p>沿汾江河边都是新打造的绿道，风景很不错。沿途都是卖小吃、饮料的小贩。也经过了我一直想去的王借岗公园，又帮我在百度地图点亮了一个片区。</p>
<figure class="figure-v">
  <img data-src="//static.hezhiyi.com/images/blog/2025/0326/04.jpg" alt="">
</figure>
<h3>14:29 PM 第四签：绿岛湖国际中心（20.5KM）</h3>
<p>距离不远，但人走了一个上午已经有点累，所以走到绿岛湖就在湖边休整了20分钟。在这里汇合身穿浅蓝色衣服的&#8221;三水线&#8221;驴友，这些都是大神人，因为他们的线路比我们多出14km，也就是说别人一大早7点就已经出发，并且走得很快。其实禅城线算是“作弊”线路，因为它全场是36km，是全部线路中最短的。</p>
<h3>15:25 PM 第五签：智慧公园（24.5KM）</h3>
<p>这段就开始拼耐力了，阳光猛烈，大树比较少，脚步也渐渐慢下来。不过令我意外的是智慧公园原来很漂亮，又找多了一个休闲的地方。  </p>
<h3>16:46 PM 第六签：青年公园（30.5KM）</h3>
<p>如果认真计算距离和时间，就发现我速度快了很多。不，我没作弊（已经看到很多人骑共享单车跑了），其实原因是身边的队友也受不了骑车去。我只是自己发挥真正的实力 ^_^。PS沿线的公交线路都挤满了人，其实这不是比赛，尽力而为就好。</p>
<div class="image-list col-2">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/0326/05.jpg" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/0326/06.jpg" alt="">
    </div>
</div>
<h3>18:12 PM 终点·世纪莲体育中心（36KM）</h3>
<p>突然想起十年前那次30公里徒步，走完整个人都废了，所以这次出发前一直怀疑自己到底行不行。现在看来，身体确实比以前能扛了，但更关键的是——只要咬咬牙，好像也没什么走不完的路。</p>
<div class="image-list col-2">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/0326/07.jpg" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/0326/08.jpg" alt="">
    </div>
</div>

2025佛山50公里徒步（禅城线）

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

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

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

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

2025佛山50公里徒步（禅城线）
2025-03-26 15:34

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

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

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

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

2025佛山50公里徒步（禅城线）2025-03-26 15:34

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

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

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

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

2025佛山50公里徒步（禅城线）
2025-03-26 15:34

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