核心范式转变

Vue 框架从 2.x 升级到 3.x 不仅仅是版本号的迭代，更是底层编程思维的重大革新。理解这一过程的关键，在于厘清"声明式"与"命令式"两种编程模式在框架不同阶段的具体体现。

声明式（Declarative）：侧重于定义最终状态或目标。开发者只需描述界面应该呈现什么样子，框架自动处理 DOM 更新的过程。典型代表是 Vue 的模板语法。

命令式（Imperative）：侧重于具体的执行步骤。开发者需要手动编写代码来控制每一步操作，包括如何修改数据、何时更新视图等。直接操作 DOM 即属于此类。

Vue 始终追求声明式的开发体验，但在实现手段上，Vue 2 和 Vue 3 采用了截然不同的路径。

Vue 2：基于选项的分类管理

Vue 2 的 Options API 通过预定义的属性容器（如 data、methods、lifecycle）来组织组件逻辑。这种方式虽然降低了入门门槛，但在处理复杂业务时，会导致相关功能的代码分散在不同的选项中。

示例：通知提示控件

在 Vue 2 中，要实现一个简单的显示/隐藏通知功能，逻辑被强制分割：

// Vue 2 Options API
export default {
  name: 'NotificationBox',
  data() {
    // 状态定义在这里
    return {
      visible: false
    };
  },
  methods: {
    // 行为定义在这里
    toggleStatus() {
      this.visible = !this.visible;
    }
  },
  template: `
    <div v-if="visible"></div>
    <button @click="toggleStatus">切换</button>
  `
};

观察上述结构可以发现，尽管模板部分是声明式的，但支撑该功能的状态变量和操作函数被物理隔离开。随着功能增加（例如添加计时器、颜色配置），需要在不同的选项块之间频繁跳转才能理清逻辑脉络，这被称为"关注点碎片化"。

Vue 3：基于组合的逻辑内聚

Vue 3 引入 Composition API，允许将相关联的状态、计算属性和事件处理程序集中在一个地方编写。它利用底层的响应式原语（如 ref、reactive）作为构建模块，让开发者能够以更接近普通 JavaScript 函数的方式来组装组件逻辑。

示例：重构后的通知提示控件

使用 Vue 3 的 <script setup> 语法，上述逻辑可以紧凑地组织在一起：

<script setup lang="ts">
import { ref } from 'vue';

// 状态与逻辑紧密绑定
const displayState = ref(false);

const flipDisplay = () => {
  displayState.value = !displayState.value;
};
</script>

<template>
  <div :class="{ active: displayState }"></div>
  <button @click="flipDisplay">切换显示</button>
</template>

在这种模式下，所有与"通知显示"相关的变量和函数都位于顶层作用域，不再受限于固定的选项分类。这不仅提升了代码的可读性，也让 TypeScript 的类型推导变得更加准确自然。

逻辑复用能力的对比

跨组件共享业务逻辑是前端开发的常见需求。Vue 2 主要依赖 Mixins，而 Vue 3 推荐 Composables（组合式函数）。

Mixins 的局限性

Mixins 将数据和生命周期注入到当前组件，容易导致命名冲突，且来源不透明。以下是一个典型的混合数据获取逻辑：

// Vue 2 Mixin
export default {
  data() {
    return { fetchLoading: true };
  },
  mounted() {
    fetchData().then(() => this.fetchLoading = false);
  },
  beforeDestroy() {
    // 清理副作用
  }
};

如果两个 Mixins 定义了同名的变量（如 loading），或者组件自身已有同名字段，维护起来将非常困难。

Composables 的优势

Vue 3 的组合式函数像普通工具函数一样被调用，返回值明确，完全避免了命名污染：

// Vue 3 Composable
export function useAsyncData(resourceId) {
  const isLoading = ref(true);
  const result = ref(null);

  const loadData = async () => {
    isLoading.value = true;
    try {
      const res = await fetch(`/api/${resourceId}`);
      result.value = await res.json();
    } finally {
      isLoading.value = false;
    }
  };

  onMounted(loadData);

  return { isLoading, result, loadData };
}

// 使用时解构赋值，语义清晰
const { isLoading, result } = useAsyncData('user-profile');

这种写法不仅保持了逻辑的高内聚，还清晰地展示了输入与输出，极大增强了大型项目的可维护性。通过这种方式，Vue 3 实际上是利用底层的命令式 API，构建出了更加灵活和可预测的声明式应用架构，使开发者能够更专注于业务逻辑本身而非框架的限制。