找了一家靠湖的茶馆，点了一杯明前龙井。水墨主题博客的灵感，其实就源于这杯茶和眼前的这片湖光山色。

所谓“水墨”，不仅是一种视觉风格，更是一种留白的心境。在繁杂的代码世界里，我们也需要给自己留一点喘息的空间。

下周一又要开始新的迭代了，但此刻，我只想看着湖面上的水波发呆。

（注意：这篇例文虽然也属于 vue教学 分类，但它没有配置 category_path，所以它不会被收纳到具体的章节折叠面板中，而是会直接平铺在 vue教学 这个大类的最下方。）

1. 不要滥用 Watcher

很多初学者喜欢用 watch 来监听数据的变化并执行逻辑。但实际上，大多数情况下，你应该优先使用 computed 计算属性。computed 具有缓存机制，性能更好，而且代码意图更明确。

2. 组件拆分不要过度

虽然组件化很好，但把一个只有几十行代码、完全没有复用价值的区块硬拆成三个组件，只会增加状态管理的负担和代码阅读的成本。保持克制，在“可复用”和“好维护”之间找到平衡点。

希望这些小建议对你有所帮助！

在这篇文章中，我们将探讨 Vue.js 的两大核心基石：响应式系统和虚拟 DOM。

什么是响应式？

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

虚拟 DOM 的优势

虚拟 DOM (Virtual DOM) 允许我们在内存中以 JavaScript 对象的形式维护一份对真实 DOM 的描述，通过对比差异（Diff 算法）来最小化对真实 DOM 的操作，从而提升性能。

“在复杂的应用中，合理的利用虚拟 DOM 可以极大地减少直接操作 DOM 带来的性能损耗。”

这也是为什么我们在开发大型 Vue 应用时，依然能保持丝滑体验的原因。

本文将向你展示如何在这里优雅地创作文章。

1. 文章结构 (Front Matter)

每一篇文章的开头都需要有一段 YAML 格式的配置信息，我们称之为 Front Matter。这是一篇文章的“骨架”。

新建文章时，在 _posts/ 目录下创建一个命名格式为 YYYY-MM-DD-你的标题拼音.md 的文件，然后在文件开头写入：

---
layout: post
title: "你的文章标题"
category_path: "开发/前端/React"  # 树状分类路径
cover: "https://你的图片地址.png" # 封面图（可选）
description: "文章的一句话简介，用于 SEO 和列表展示。"
keywords: "标签1, 标签2"
---

关于 category_path

这是我们特别优化的功能。你可以通过斜杠 / 来定义多级分类，比如 随笔/生活/2026。这会自动在“分类”页面生成可折叠的树状菜单，并且文章底部的“上一篇/下一篇”会优先推荐同一路径下的文章。

2. 插入图片 (自动 WebP)

你完全不需要担心图片格式和体积问题！

你只需要像平常写 Markdown 一样插入本地的 png 或 jpg 图片：

![美丽的风景](/assets/images/scenery.jpg)

发生了什么？ 当你推送到 GitHub 后，我们配置好的后台机器人（GitHub Actions）会自动拦截这张图片，将其无损压缩并转换为体积更小的 WebP 格式，同时悄悄把你文章里的链接也改掉。 你只管贴图，剩下的交给我们。

3. 归档与时间线

你可能注意到了本博客独特的“归档”页面。 所有的文章都会自动按照年份收纳进折叠面板中。年份节点旁边的圆点，当你把鼠标悬停上去时，会呈现出一种水墨晕染扩散的呼吸感动效。

这一切都不需要你额外配置，只要写文章，时间线就会自动生成。

4. 图表与代码

作为一个科技与文艺并重的博客，我们内置了对程序员极其友好的功能。

代码高亮

// 你的代码会自动拥有优雅的高亮配色和一键复制按钮
console.log("Hello, Shuimo!");

Mermaid 矢量图

你可以直接在 Markdown 中画流程图，它们会被自动渲染成符合当前主题颜色（墨青色）的矢量图：

` ``mermaid
graph TD
    A[构思] --> B(写作)
    B --> C{是否配图?}
    C -->|是| D[上传 PNG/JPG]
    C -->|否| E[发布]
    D --> E
    E --> F[自动转为 WebP 并上线]
` ``

(注意：实际书写时请去掉 ` ``` ` 之间的空格)

5. 发布文章

完成写作后，只需将 .md 文件提交并 Push 到 GitHub 仓库的 main 分支。 我们的自动化工作流将在几分钟内完成构建，你的文章就会带着最完美的排版和最优化的图片，呈现在读者面前。

祝你创作愉快！