TodoList重构记：解剖Vue2到Vue3的响应式革命

本文以经典TodoList应用为例，解析Vue响应式系统的核心机制，并对比Vue2与Vue3在工程实践中的差异。我们将通过一个简单却完整的Demo，揭示现代前端框架"数据驱动界面"的本质要义。

一、数据绑定的双生火焰

1.1 单向数据流动

在Todo应用的模板中，我们通过{{title}}实现数据单向绑定。这种"数据→视图"的绑定方式，确保了界面始终反映数据的当前状态。当title变化时，视图自动更新，这是响应式系统的基石。

html 复制代码

<h2>{{ title }}</h2>

1.2 双向绑定魔法

输入框的v-model指令创造了双向绑定的奇迹：

html 复制代码

<input v-model="title">

这个语法糖等价于：

html 复制代码

<input 
  :value="title"
  @input="title = $event.target.value"
>

当用户输入时，@input事件触发数据更新，继而驱动视图同步。Vue2通过Object.defineProperty实现这一机制，建立数据与视图的双向通道。

二、计算属性的精妙设计

在显示任务总数时，我们使用计算属性：

javascript 复制代码

computed: {
  all() {
    return this.todos.length
  }
}

这个设计体现了响应式系统的精妙之处：

依赖追踪：自动检测todos数组的变化
缓存机制：避免重复计算
声明式编程：将计算逻辑声明为数据属性

当我们需要全选/反选功能时，计算属性的setter派上用场：

javascript 复制代码

allDone: {
  get() {
    return this.todos.every(todo => todo.done)
  },
  set(value) {
    this.todos.forEach(todo => todo.done = value)
  }
}

三、Vue2响应式系统的局限性

尽管Vue2的选项式API简洁优雅，但在复杂场景中显露出局限：

代码组织困境

data、methods、computed分散在不同选项，百行以上的组件难以维护
类型支持薄弱

基于对象的API难以提供完善的TypeScript支持
响应式限制

数组索引修改、对象属性添加无法被检测
逻辑复用困难

Mixins存在命名冲突、来源不清晰等问题

四、Vue3的组合式革命

4.1 组合式API实践

Todo应用在Vue3中的实现：

javascript 复制代码

import { ref, computed } from 'vue'

export default {
  setup() {
    const title = ref('数据驱动的界面')
    const todos = ref([])

    const all = computed(() => todos.value.length)
    
    const allDone = computed({
      get: () => todos.value.every(todo => todo.done),
      set: (val) => todos.value.forEach(todo => todo.done = val)
    })

    return { title, todos, all, allDone }
  }
}

4.2 革命性改进

响应式升级

使用Proxy代替Object.defineProperty，完美支持Map/Set等集合类型

逻辑组合

相关功能可封装为自定义hook：

javascript 复制代码

// useTodos.js
export default function () {
  const todos = ref([])
  // 添加、删除等逻辑...
  return { todos }
}

类型友好

TypeScript支持度显著提升
Tree-shaking优化

Composition API可按需编译

五、工程实践的范式迁移

维度	Vue2选项式	Vue3组合式
代码组织	按选项分类	按功能聚合
复用方式	Mixins/高阶组件	组合函数
响应式原理	Object.defineProperty	Proxy
TypeScript	有限支持	一等公民支持
心智模型	选项配置	函数式编程

六、迁移路线图

对于现有Vue2项目，推荐渐进式迁移策略：

使用@vue/composition-api插件逐步改造
优先改造复杂组件
封装共享逻辑为组合函数
最终升级Vue3核心库

七、未来展望

Vue3的响应式系统仍在持续进化：

Vapor Mode：编译时优化，减少运行时开销
Reactivity Transform：简化ref的.value访问
更好的SSR支持

正如Todo应用的演进，从简单的双向绑定到复杂的响应式系统，Vue始终在平衡开发体验与性能优化的天平。理解数据驱动背后的响应式原理，将帮助我们在技术变革中保持核心竞争力。