玩转 Vue 哲学：从 2 到 3，快乐的进化！本文探讨了 Vue 的发展历程，重点介绍了 Vue 2 和 Vue 3

引言

在阅读这篇文章之前你可以先看小编的上一篇文章哦！前端的发展历史

在前端从“刀耕火种”的时代进化到“现代社会”的过程中，Vue 作为一股不可忽视的力量，为开发者带来了巨大的变化🚀。今天，我们就来深入探讨一下 Vue 的哲学，了解它是如何从 Vue 2 到 Vue 3，不断迭代，提升开发体验的✨。无论你是刚刚接触 Vue 的新手👶，还是已经摸爬滚打多年的老兵👨‍💻，都能从中找到自己的一份共鸣。让我们一起聊聊，为什么 Vue 会让开发者们“停不下来”💻，并且究竟 Vue 2 和 Vue 3 有哪些不同？这篇文章将带你轻松了解它们的演变历程，帮你更好地掌握 Vue 的魅力🎉。

这次我们仍然是通过一个todos例子：

屏幕截图 2024-12-28 230108.png

双向绑定：你改界面，我改数据，大家一起嗨 🚀

Vue 哲学第一条：数据和界面状态必须保持一致！

还记得第一次用 Vue 的双向绑定吗？v-model 这个小东西让你只用写一行代码，瞬间实现界面和数据联动，仿佛是“命运的红线”。

比如：

<input v-model="title">

界面发生改变，数据跟着变；数据发生改变，界面也乖乖听话。这种操作带来的快感，就像……（嗯，脑补一张敲代码时的陶醉表情包 😌）。

要是没有 v-model 呢？你得写监听器、写回调，数据和界面不同步的时候，你还得手动处理，能不能有点同情心啊！所以说，v-model 就是 Vue 的一大法宝，直接让我们专注数据本身。

`:class` 和 `:value`？动态绑定属性更是信手拈来 🎨

除了双向绑定，Vue 的 v-bind 也超贴心。动态属性绑定？来，举个栗子：

<span :class="{done: todo.done}">{{todo.title}}</span>

在这个{}花括号是一个javascript脚本区域我们也可写一些更复杂的代码在里面来满足我们生产的需要。

Todo 项完成了就加个灰色的划线效果，界面和数据联动还不香吗？

用 v-bind 的地方还有很多，比如动态绑定 src、动态绑定样式……不夸张地说，Vue 的哲学就在于：一切都让开发者只用关心“数据”，界面啥样你根本不用操心。

计算属性：数据的再加工厂 🏭

当你的数据不是直接展示的，而是要加工一下再放上去时，计算属性（computed）大显神威。比如：

computed: {
  active() {
    return this.todos.filter(todo => !todo.done).length
  },
  allDone: {
    get() { return this.active === 0 },
    set(val) {
      this.todos.forEach(todo => todo.done = val)
    }
  }
}

active 用来计算未完成的任务数量，allDone 还能 get 和 set，轻松实现全选功能。这就叫：数据加工厂，让你的界面状态和数据始终保持一致！

Vue 2：开发者爽，数据逻辑分明 🤩

在 Vue 2 的时代，我们的代码大多长这样：

const App = {
  data() {
    return {
      title: 'todo',
      todos: [
        { title: '吃饭', done: false },
        { title: '睡觉', done: true },
      ]
    }
  },
  computed: {
    active() { return this.todos.filter(todo => !todo.done).length }
  },
  methods: {
    addTodo() {
      this.todos.push({
        title: this.title,
        done: false
      })
      this.title = ''
    }
  }
}

大写的爽！data、methods、computed 井井有条，功能拆分得清清楚楚，写代码就像搭积木一样简单！

**但是！**当你的组件代码超过 100 行的时候，data 和 methods 开始变得混乱不堪，尤其是当它们之间有很多复杂的交互时，你会发现代码维护越来越费劲…… 😵

Vue 3：组合式 API，专治代码混乱！✨

Vue 哲学第二条：大型项目也能写得优雅！

在 Vue 3 的世界里，一切都变得更灵活了。

先看一段 Vue 3 的代码：

const { ref, computed } = Vue
const App = {
  setup() {
    let title = ref('hello')
    let count = ref(0)
    let double = computed(() => count.value * 2)

    function add() {
      count.value++
    }

    return {
      title,
      count,
      double,
      add
    }
  }
}

Vue 3 的快乐点：

灵活性高：组合式 API 把相关的逻辑写在一起。代码逻辑不再像 Vue 2 那样“割裂”，维护大型项目时，思路更清晰。
按需引入：ref 和 computed 这些 API，直接导入就能用，不需要强制绑定到 Vue 组件的 data、methods、computed。
性能更优：Vue 3 的响应式系统经过全面升级，变得更快更强，尤其是 Proxy 的使用，让组件性能飞跃！

说白了，Vue 3 的组合式 API 让你可以更专注于“模块化”和“逻辑拆分”，代码结构不仅干净，而且更易维护。

比一比：Vue 2 和 Vue 3 的代码风格 🔍

给你们一张图来更好的分析一下吧！

为了更直观，我们来对比一下 Vue 2 和 Vue 3 的代码风格差异：

Vue 2：选项式 API

const App = {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    double() {
      return this.count * 2
    }
  },
  methods: {
    add() {
      this.count++
    }
  }
}

Vue 3：组合式 API

const { ref, computed } = Vue
const App = {
  setup() {
    let count = ref(0)
    let double = computed(() => count.value * 2)

    function add() {
      count.value++
    }

    return {
      count,
      double,
      add
    }
  }
}

对比一下就会发现，Vue 3 的代码模块化更清晰，逻辑相关的部分都写在一起，读起来也更方便。

总结：Vue 哲学，让开发者“躺着挣钱” 💵

Vue 的哲学核心就在于：让开发者专注数据，把“琐事”丢给框架！

无论是 Vue 2 的简单易用，还是 Vue 3 的灵活强大，最终目的都是让你写代码时更轻松。双向绑定、计算属性、组合式 API……每一项特性都在替你省时间，让你从冗杂的 DOM 操作中解放出来。

用 Vue，真的是一种享受。现在问题来了：还不快动手写个 Vue 项目玩玩？🎉

玩转 Vue 哲学：从 2 到 3，快乐的进化！

引言