以Vue框架为例说明什么是声明式编程

“声明式的编程模型” （declarative programming model）是一个编程思想，和 命令式编程（imperative programming）相对。

🌱 先看区别

• 命令式编程：你要一步一步告诉计算机 “怎么做” 。
  例如：操作 DOM，手动写出增删改每个节点的逻辑。

  // 命令式操作 DOM
  const ul = document.querySelector('ul');
  const li = document.createElement('li');
  li.textContent = '新项目';
  ul.appendChild(li);
  

  这里你得自己处理“怎么创建元素、怎么插入”的过程。

• 声明式编程：你只需要描述 “我想要什么” ，具体的“怎么实现”由框架（比如 Vue）帮你处理。

  <!-- 声明式写法 -->
  <ul>
    <li v-for="item in list" :key="item">{{ item }}</li>
  </ul>
  

  你只声明“列表应该长这样”，至于 如何渲染、更新 DOM，Vue 会自动完成。

✨ 声明式编程的特点

1. 描述结果，而不是过程：你只关心最终 UI 长什么样，不用关心每一步的实现。
2. 数据驱动视图：UI 是数据的“投影”。当数据变化时，框架自动让视图跟着更新。
3. 提高可读性和维护性：逻辑更简洁，不必在 DOM 操作细节中“绕来绕去”。

📌 类比

• 命令式像是告诉朋友：“去厨房，拿个盘子，从冰箱里拿两个苹果，洗干净，放盘子里端过来。”
• 声明式像是直接说：“我想要一盘苹果。”
  至于拿盘子、洗苹果这些步骤，朋友（框架）会自动完成。