前端框架是什么？React/Vue/Svelte 人话版

读完这篇，你会从底层逻辑搞懂前端框架为什么存在、它到底帮你做了什么事，以及 React/Vue/Svelte 三个主流框架该选哪个。

先问一个根本问题，网页到底是怎么跑的

你打开一个网页，看到的是文字、图片、按钮、输入框。这些东西在技术层面，就是浏览器把 HTML 渲染成了画面。

但网页不是静态的，按钮可以点，表单可以填，数据会变化。这就需要 JavaScript 来操作页面上的元素。技术上，这叫操作 DOM（Document Object Model），DOM 就是浏览器把 HTML 解析后生成的一棵元素树。

第一性原理来了——网页开发的本质，就是「数据变了，页面也要跟着变」。

你有一个购物车，商品数量从 1 变成 3，页面上显示的数字也得变成 3。你有一个待办清单，勾选一项完成后，那一条要划掉。数据驱动页面，就这么简单。

不用框架时的痛苦

知道了本质是「数据变了页面跟着变」，你用原生 JavaScript 来实现，看看会发生什么。

假设你有一个计数器，点一下按钮数字加 1。原生写法需要三步，

1. 用代码找到页面上的那个数字元素（手动查 DOM）
2. 读取当前数字，加 1（手动算数据）
3. 把新数字写回元素里（手动改 DOM）

听起来不多，但如果页面上有 20 个会变的东西呢？每次数据变化，你都要手动找到对应的 DOM 元素，手动更新内容，手动改样式。而且这些操作之间有依赖关系——A 数据变了，B 的显示也要跟着变，C 的按钮状态也要切换。