1.1 命令式与声明式

视图层框架按范式分为命令式与声明式两类：前者描述「过程」，后者描述「结果」，这决定了框架的写法与内部实现方式。

一、两种范式的区别

声明式框架的内部实现一定是命令式的，只是暴露给用户的 API 更加声明式。

二、同一需求的三种写法

需求：获取 #app 元素 → 文本设为 hello world → 绑定点击事件 → 点击时弹出 ok。

jQuery（命令式）：每一步都对应一次 API 调用，与自然语言描述一一对应。

$('#app') // 获取 div
  .text('hello world') // 设置文本内容
  .on('click', () => { alert('ok') }) // 绑定点击事件

原生 JavaScript（命令式）：同样是把过程逐步写出来。

const div = document.querySelector('#app') // 获取 div
div.innerText = 'hello world' // 设置文本内容
div.addEventListener('click', () => { alert('ok') }) // 绑定点击事件

Vue.js（声明式）：只声明「结果」，不需要关心 DOM 是怎么创建、怎么绑定事件的。

<div @click="() => alert('ok')">hello world</div>

命令式代码的每一步操作都要自己维护，过程一长就容易出错；声明式代码只描述目标状态，改动时不用同步修改一堆 DOM 操作语句。

三、取舍结论

• 可维护性：声明式 > 命令式，用户侧代码量更少、意图更直观。
• 性能上限：命令式更高，因为开发者明确知道哪些地方变了，可以只做必要的修改。
• 框架设计者的目标不是「性能最高」，而是在保住声明式可维护性的前提下，把性能损失压到最小——这正是后续虚拟 DOM 与编译优化的意义（见 1.2 性能与可维护性的权衡）。

相关

• 1.2 性能与可维护性的权衡：声明式为什么必然比命令式多一层性能开销。