前端我要入门-优快云博客

原创 Nuxt3 完整学习笔记（入门+实战+优化+部署）

相比于 Nuxt2，Nuxt3 基于 Vite 构建、支持自动导入、体积更小、性能更强、原生支持 TS，是目前企业级 Vue 服务端渲染项目的首选框架。Nuxt3 是目前 Vue 生态**最主流的服务端渲染框架**，兼顾开发效率、项目性能与 SEO 优化，同时具备全栈开发能力。-- 编程式<script setup>本文整合入门核心、常用API、业务实战、性能优化、线上部署，适合新手学习、面试复盘、项目落地。**服务端优先请求**，SSR 渲染时在服务端获取数据，解决首屏无数据问题，支持缓存、加载状态。

2026-06-05 12:36:08 238

原创 $fetch / useFetch / useLazyFetch 极简区别

• useLazyFetch：自动请求、不阻塞路由，先渲染页面再等数据，显示loading。• useFetch：自动请求、阻塞路由，SSR首屏优先用，必须等数据加载完才显示页面。useFetch ✅ 自动 ✅ 阻塞（等数据） ✅ 强核心首屏数据、SEO页面。首页、列表页、详情页必须首屏展示的数据（要SEO、要完整首屏）• $fetch：基础请求工具，手动调用，无响应式、无缓存。非核心数据、推荐栏、轮播、次要模块，不需要首屏立刻展示。2. 不阻塞路由：页面先渲染出来，再后台请求数据。

2026-05-21 20:00:49 35

原创客户端渲染 CSR vs 服务端渲染 SSR

2. SSG 静态预渲染：打包时直接生成静态HTML，最快、最稳。2. 服务器提前执行Vue代码、请求接口、拼接完整HTML。一、客户端渲染 CSR（Vue/React 传统SPA）二、服务端渲染 SSR（Nuxt3 / Next.js）1. 浏览器请求页面，服务器只返回空HTML + js。• SSR：服务器先帮你把页面拼好再发给浏览器。3. JS执行、创建DOM、请求接口拿数据。官网、电商、资讯、博客、H5、对外C端项目。后台管理系统、内部系统、无需搜索引擎页面。4. 浏览器直接渲染，再注水激活交互。

2026-05-21 15:14:03 31

原创 Vue2与Vue3核心区别学习笔记

Vue3采用Monorepo架构进行源码重构，将核心功能拆分为响应式、编译器、运行时等独立模块，模块间解耦更彻底，支持按需引入和Tree-Shaking，打包体积更小；移除$on/$off/$once（事件总线）、filter过滤器、mixin（不推荐使用）、$children等API，推荐使用更规范的替代方案（如mitt实现事件总线、方法/计算属性替代过滤器）。• 优势：逻辑聚合，代码可读性高；支持Suspense组件，实现异步组件的加载状态管理，可自定义加载中、加载失败界面，简化异步组件开发。

2026-04-18 21:51:53 199

原创 WebSocket 与 SSE 技术选型与实战对比

这对于长对话场景来说，是非常实用的特性，省去了手动实现重连逻辑的麻烦。在前端面试中，面试官问你“为什么用 SSE 而不是 WebSocket”，你就可以结合自己的项目场景，从“通信方向、实现成本、原生特性”这几个维度，清晰地阐述你的选型理由，这会是一个很大的加分项。• 之后，服务器就可以通过这个连接，不断地向客户端推送数据，而客户端只能接收，不能主动发送新数据，像一个“只能听，不能说”的广播。这篇文章，我将从原理、场景、实现和项目实战的角度，带你彻底搞懂这两种技术的区别，以及如何做出正确的技术选型。

2026-04-18 01:14:47 182

原创【无标题】Vue 懒加载（Lazy Loading）学习笔记

const Home = () => import('@/views/Home.vue') // 需要时才加载。el.src = '/images/default.jpg' // 加载失败显示默认图片。import Home from '@/views/Home.vue' // 一开始就加载。error: '/error.png', // 加载失败图片。'加载中...' : '加载更多' }}loading: '/loading.gif', // 加载中图片。

2026-04-10 20:25:02 210

原创 Vue 父子组件通信学习笔记

父子组件通信是 Vue 开发的基础技能，核心原则是单向数据流：父组件数据流向子组件，子组件通过事件通知父组件修改数据，避免子组件直接修改父组件数据，保证数据流向清晰、易于维护。父组件向子组件传递数据，props 是官方推荐的首选方案，简单易懂且遵循单向数据流原则，数据由父组件维护，子组件只读不修改，避免数据混乱。如果需要直接获取子组件的DOM 元素、数据、方法，可以使用 ref 模板引用，适合直接操作子组件的场景。子组件想要向父组件传递数据、触发父组件方法，需要用到自定义事件，这是子传父的核心方案。

2026-03-14 00:38:54 220

原创关于AJAX的讲解

摘要：AJAX（异步JavaScript和XML）是现代Web开发的核心技术，通过异步请求实现页面无刷新更新。文章解析了AJAX的技术本质，包括XMLHttpRequest/Fetch API、JSON数据格式和DOM操作，详细介绍了其工作流程和典型应用场景（如表单验证、动态加载等），并探讨了跨域、回调地狱等常见问题的解决方案。随着前端框架发展，AJAX演变为更易用的请求库（如axios），但其异步交互+局部更新的核心价值不变，仍是构建动态Web应用的基础技术。

2025-12-29 11:55:49 621 1

2501_91864401的博客