React/Vue 框架到底是什么

HTML/CSS/JavaScript 入门讲了前端三件套的基础。用它们可以搭出任何页面，但一旦页面复杂起来，你会发现原生写法有两个很明显的痛点。

¶原生写法的痛点

¶痛点一：手动同步 DOM 太累

回忆一下上篇的计数器，每次数据变化都要手动调用 document.getElementById 来更新页面：

let count = 0;

function increment() {
    count++;
    // 每次数据变了，都要手动找到元素、手动更新
    document.getElementById('count').textContent = count;
}

计数器只有一个数字要更新，还好。但如果是一个待办事项列表呢？添加一项要往 DOM 里插入节点，删除一项要移除节点，修改一项要定位到对应节点再更新内容，标记完成要改样式。每个操作都得手动操作 DOM，漏更新一个地方，页面就和数据不一致了。

¶痛点二：代码无法复用

假设你的页面需要两个计数器，用原生 HTML 只能把整段 HTML + CSS + JS 复制粘贴一遍，还要小心地给每个元素换不同的 id，避免冲突。如果后面要改个按钮样式，每个副本都得改。

<div id="count-1">0</div>
<button onclick="increment1()">增加</button>


<div id="count-2">0</div>
<button onclick="increment2()">增加</button>

两个就要复制一遍，十个呢？这种复制粘贴的方式显然不可持续。

¶框架解决了什么

React、Vue 这些框架同时解决了这两个问题：数据变了页面自动更新，而且可以把 UI 封装成可复用的组件。

写一个 <Counter /> 组件，就可以像调用函数一样在页面中多次使用，每个实例互不干扰。接下来分别看看 React 和 Vue 是怎么做的。