🔗 前端技术因果链 — 因为…所以…

← 返回因果链

📊 总览 ① DOM繁琐→框架 ② SPA慢→SSR ③ SSR贵→SSG/ISR ④ 状态共享→全局状态 ⑤ 构建慢→Vite ⑥ 跨端需求 🎯 面试点

📊 因果链总览图

❓ DOM操作繁琐 → 💡 jQuery → ⚡ 大型项目难维护 → 💡 MVVM框架

⚡ SPA首屏慢+SEO差 → 💡 SSR → ⚡ SSR服务器成本高 → 💡 SSG/ISR

⚡ 组件间状态共享难 → 💡 全局状态管理

⚡ Webpack构建慢 → 💡 Vite(ESM)

① 因为：DOM操作繁琐 → 所以MVVM框架

❓ 问题：手动操作DOM，代码难维护

// ❌ 原生JS：手动操作DOM
document.getElementById('name').innerText = user.name;
document.getElementById('age').innerText = user.age;
document.getElementById('avatar').src = user.avatar;
// 数据变了？再写一遍！100个字段？写100遍！

💡 所以：MVVM框架——数据驱动视图

// ✅ Vue：数据变了，视图自动更新
<template>
  <div>{{ user.name }} - {{ user.age }}</div>
  <img :src="user.avatar" />
</template>

// 因为数据变了视图自动更新 → 所以不用手动操作DOM
// Vue: 响应式系统(Object.defineProperty / Proxy)
// React: 虚拟DOM + diff算法 → 最小化DOM操作

⚡ 但是：SPA首屏慢+SEO差

SPA只有一个空HTML+大JS包 → 首屏要等JS下载完才能渲染 → 白屏时间长
搜索引擎爬虫不执行JS → 看不到内容 → SEO差

② 因为：SPA首屏慢+SEO差 → 所以SSR

❓ 问题：JS下载→解析→渲染，用户看到白屏

💡 所以：SSR——服务端渲染好HTML再发给浏览器

SPA: 浏览器下载空HTML → 下载JS → 渲染 (3秒白屏)

SSR: 服务器渲染好HTML → 浏览器直接显示 (0.5秒出内容)

// Nuxt 3 (Vue SSR)
// 因为需要SEO + 首屏快 → 所以用SSR
// pages/index.vue 自动支持SSR
<script setup>
// 服务端就执行的数据获取
const { data: products } = await useFetch('/api/products')
</script>

⚡ 但是：SSR服务器成本高

每个请求都要在服务器渲染HTML → TPS上不去 → 服务器成本比CDN贵10倍

③ 因为：SSR服务器成本高 → 所以SSG/ISR

💡 所以：SSG——构建时渲染好，放CDN

因为大部分页面内容不频繁变 → 所以构建时就把HTML生成好，放CDN上，0服务器成本

方案	渲染时机	因为…所以选
CSR	浏览器	因为不需要SEO → 管理后台等内部系统
SSR	每次请求时	因为需要SEO+内容实时 → 电商详情页
SSG	构建时	因为内容不常变 → 博客/文档/营销页
ISR	构建时+定时更新	因为大部分不变但偶尔更新 → 博客+最新文章

④ 因为：组件间状态共享难 → 所以全局状态管理

❓ 问题：爷爷组件的数据要传给孙子，中间10层props

"Prop Drilling"——像传纸条一样，中间每个人都要传，谁也不看

💡 所以：全局状态管理

类比：公司公告栏——不用一个人一个人传，直接贴公告栏，谁需要谁去看

// Vue: Pinia（因为Vuex太重 → 所以Pinia更轻量）
// stores/user.js
export const useUserStore = defineStore('user', () => {
  const user = ref(null)
  const login = async (credentials) => {
    user.value = await api.login(credentials)
  }
  return { user, login }
})

// 任何组件直接用
const userStore = useUserStore()
userStore.user // 不用props！

⑤ 因为：Webpack构建慢 → 所以Vite

💡 Vite——因为ESM让浏览器自己解析依赖

因为Webpack要打包所有模块再启动 → 大项目冷启动30秒+ → 所以Vite用浏览器原生ESM，按需编译，冷启动1秒

Webpack: 打包1000个模块 → 30秒 → 启动

Vite: 不打包 → 浏览器ESM按需加载 → 1秒启动

⑥ 因为：要跨端 → 所以跨端框架

💡 跨端方案因果链

因为写三套代码（H5+iOS+Android）成本3倍 → 所以需要跨端

方案	原理	因为…所以选
H5/小程序	Web技术	因为开发快 → 所以做运营页/简单应用
React Native	JS→原生组件	因为要原生体验+JS生态 → 所以选RN
Flutter	Dart→自绘引擎	因为要一致体验+高性能 → 所以选Flutter
UniApp	Vue→多端编译	因为国内小程序多 → 所以UniApp一套代码多端

⑦ 因为：页面加载慢 → 所以性能优化

❓ 问题：3秒白屏，用户跑了

因为Google统计：加载每增加1秒 → 转化率下降7% → 所以性能优化不是可选是必选

💡 所以：前端性能优化因果链

因为	所以	具体方案
JS包太大	→ 代码分割	路由懒加载 `() => import('./Page.vue')`
图片太大	→ 图片优化	WebP格式 + 懒加载 + CDN缩略图
首屏要等数据	→ 预加载	prefetch/prerender + SSR首屏
重复请求	→ 缓存	HTTP缓存 + 本地缓存 + Redis
渲染阻塞	→ 异步加载	script defer/async + CSS critical path

// Vue Router 懒加载——因为首屏不需要所有页面代码
const routes = [
  {
    path: '/dashboard',
    // 因为用户可能不访问 → 所以不打包进首屏
    component: () => import('./views/Dashboard.vue')
  }
]

❓ 常见疑问

Vue和React怎么选？

因为Vue上手快+模板语法直观 → 所以中小项目选Vue；因为React生态大+灵活度高 → 所以大型项目选React。但两者能力边界越来越接近，选团队最熟悉的那个。

为什么大公司都在用SSR？

因为SEO是流量入口 → 所以面向C端的产品必须SSR；因为首屏速度影响转化率 → 所以电商/社交类产品必须SSR。B端管理后台不需要SSR，CSR就够了。

Pinia一定会替代Vuex吗？

因为Pinia更轻量+更好的TS支持+不需要mutation → 所以Vue官方推荐。但Vuex项目不用急着迁移——两者能共存。新项目直接用Pinia。

🎯 面试点映射

面试题	因为…所以…
SPA vs SSR vs SSG	因为SPA首屏慢/SEO差 → SSR；因为SSR贵 → SSG
Vue响应式原理	因为要数据驱动 → Proxy拦截getter/setter → 依赖收集+派发更新
Virtual DOM	因为直接操作DOM慢 → 所以用JS对象模拟DOM → diff最小更新
Pinia vs Vuex	因为Vuex有mutation/action冗余 → 所以Pinia更简洁
Vite vs Webpack	因为Webpack冷启动慢 → 所以Vite用ESM按需编译
跨端方案	因为写三套代码成本3倍 → 所以RN/Flutter/UniApp

📌 因果链总结

DOM
繁琐 → MVVM
框架 → SPA
首屏慢 → SSR → SSR
贵 → SSG/ISR → 状态
共享 → Pinia/
Redux → 构建
慢 → Vite

全栈资料库 · 因果链板块 · 前端技术因果链