记录 · 思考 · 分享

你好，这里是橙子博客。写一些关于前端开发、服务器运维和工具链的笔记。

📄 近期文章

🟢 Vue 3 组合式 API 快速上手

2026-07-29 Vue 前端

从 Options API 到 Composition API，理解响应式、生命周期和逻辑复用的核心变化。

阅读全文 →

⚙️ Nginx 入门：反向代理与静态托管

2026-07-27 Nginx 运维

最常用的 Web 服务器之一，从安装到配置反向代理、负载均衡和静态文件服务。

阅读全文 →

📦 从 Vite 到 Webpack：构建工具对比

未发布构建工具

浅析 Vite 与 Webpack 的异同，以及如何根据项目场景选择合适的工具链。

即将发布

🟢 Vue 3 组合式 API 快速上手

从 Options API 到 Composition API，更灵活的逻辑组织方式。

Vue 3 Composition API Vue 3 于 2020 年正式发布，带来了组合式 API（Composition API），这是对 Vue 2 中 Options API 的一次重大补充。它让我们能够更好地组织、复用和测试代码逻辑。

📌 为什么需要组合式 API？

在 Options API 中，一个组件的逻辑被分散在 data、methods、computed、watch 等选项中。当组件变得复杂时，同一个功能的代码可能会被拆分到不同选项中，导致 「关注点分离」 变成 「关注点分散」。

“组合式 API 的核心思想是：将同一个逻辑关注点的代码聚合在一起，而不是按选项类型划分。”

⚡ 核心概念：setup 与响应式

组合式 API 的入口是 setup() 函数，它在组件创建之前执行，因此没有 this。我们使用 ref 和 reactive 来声明响应式状态。

<script setup>
            import { ref, reactive, computed, onMounted } from 'vue'

            // 响应式状态
            const count = ref(0)
            const user = reactive({ name: '张三', age: 25 })

            // 计算属性
            const doubleCount = computed(() => count.value * 2)

            // 方法
            function increment() {
            count.value++
            }

            // 生命周期
            onMounted(() => {
            console.log('组件已挂载')
            })
            </script>

使用 <script setup> 语法糖后，代码更加简洁，顶层的变量和函数会自动暴露给模板。

🧩 逻辑复用：自定义组合式函数

组合式 API 最大的优势之一是 逻辑复用。我们可以将可复用的逻辑封装成 组合式函数（Composables），以 use 开头命名，内部可以自由使用 ref、reactive、watch 等。

// useMouseTracker.js
            import { ref, onMounted, onUnmounted } from 'vue'

            export function useMouseTracker() {
            const x = ref(0)
            const y = ref(0)

            const update = (e) => {
            x.value = e.pageX
            y.value = e.pageY
            }

            onMounted(() => window.addEventListener('mousemove', update))
            onUnmounted(() => window.removeEventListener('mousemove', update))

            return { x, y }
            }

💡 提示： 组合式 API 与 Options API 可以混合使用，但推荐在大型项目或复杂组件中优先使用组合式 API。

📖 总结

Vue 3 的组合式 API 提供了更强大的逻辑组织和复用能力。它没有抛弃 Options API，而是给了开发者更多的选择。对于新项目，建议直接使用 <script setup> + 组合式 API，享受更清晰的代码结构和更好的 TypeScript 支持。

⚙️ Nginx 入门：反向代理与静态托管

高性能 HTTP 服务器，反向代理与负载均衡的首选。

Nginx 反向代理 Nginx 是一款轻量级的 Web 服务器 / 反向代理服务器，以 高并发、低内存占用 著称。它既可以作为静态文件服务器，也可以作为应用网关，将请求转发给后端的 Node.js、Java 或 Python 服务。

📌 安装与基本命令

在 Ubuntu/Debian 系统上，可以通过 apt 快速安装 Nginx：

# 更新软件源
            sudo apt update

            # 安装 Nginx
            sudo apt install nginx -y

            # 查看版本
            nginx -v

            # 启动服务
            sudo systemctl start nginx

            # 设置开机自启
            sudo systemctl enable nginx

安装完成后，访问服务器的 http://你的IP 即可看到 Nginx 的默认欢迎页。

📁 静态文件托管

将静态资源（HTML、CSS、JS、图片等）放在指定目录下，通过 Nginx 对外提供访问。修改 /etc/nginx/sites-available/default 或新建站点配置：

server {
            listen 80;
            server_name myblog.com;

            root /var/www/myblog;
            index index.html;

            location / {
            try_files $uri $uri/ /index.html;
            }
            }

配置完成后，执行 sudo nginx -t 检查语法，然后 sudo systemctl reload nginx 使配置生效。

🔄 反向代理配置

反向代理是 Nginx 最常用的功能之一。当客户端请求到达 Nginx 时，Nginx 将请求转发给后端服务（如运行在 localhost:3000 的 Node.js 应用），并将响应返回给客户端。

server {
            listen 80;
            server_name api.myapp.com;

            location / {
            proxy_pass http://localhost:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            }
            }

🔐 安全提示： 在实际生产环境中，建议启用 HTTPS，并使用 proxy_set_header 传递真实的客户端 IP。

⚖️ 负载均衡

Nginx 支持多种负载均衡策略，如轮询（默认）、权重、IP 哈希等。下面是一个简单的轮询配置，将请求分发到两台后端服务器：

upstream backend {
            server 192.168.1.10:8080;
            server 192.168.1.11:8080;
            }

            server {
            listen 80;
            server_name loadbalance.com;

            location / {
            proxy_pass http://backend;
            proxy_set_header Host $host;
            }
            }

📖 总结

Nginx 是一个功能强大且极其稳定的 Web 服务器。无论是托管静态网站，还是作为微服务网关，它都能提供出色的性能。掌握 Nginx 的基础配置，是每一位全栈开发者和运维工程师的必备技能。