原生 JS 开发的痛点
用原生 JS 写复杂页面，最累的不是写逻辑，而是让页面和数据保持同步。每改一次数据，都要手动找到相关元素、手动更新文字、手动增删节点。功能一多，「数据」和「页面」就变成两套要靠人肉维护一致的东西。
下面的计数器示例只有 15 行，问题已经显现：状态变了必须记得调用 render；如果页面上还有三处地方显示 count，render 里就要改三处；忘记同步任何一处，页面就出现「数据是对的、显示是错的」的诡异 bug。
真实项目里列表更复杂：要处理排序、过滤、局部更新、事件绑定/解绑……手写代码量指数级增长，而且全是重复的模式。这就是「痛点」：工程师的价值应该花在业务逻辑上，而不是花在同步 DOM 上。
本节要点原生开发的核心痛点：数据与视图要手动保持同步，代码量大、易漏改、难维护；功能越多问题越严重。
HTML
<h3>计数器</h3> <button id="minus">-</button> <span id="count">0</span> <button id="plus">+</button> <script> // 原生 JS：状态与视图要手动同步 let count = 0; const countEl = document.getElementById('count'); function render() { // 每次状态变化都要手动调用 countEl.textContent = count; // 如果页面上还有别处显示 count，这里还得再多改几行…… } document.getElementById('plus').addEventListener('click', () => { count++; render(); // 忘了调用就出 bug }); document.getElementById('minus').addEventListener('click', () => { count--; render(); }); </script>
