Vue 2 & Element UI 核心速成：150条知识点，即学即用
jack edward
6
9-25原野: 今天我们来聊一个有点反直觉的话题。有个技术，叫 Vue 2，它在2023年底已经正式停止官方维护了，也就是我们常说的EOL。但今天，我们偏要把它和它的老搭档 Element UI 拎出来聊聊。晓曼，你说，现在还花时间去了解一个“过时”的技术，真的有意义吗？
晓曼: 诶，这个问题问得特别好。我的看法是，非常有意义。就像我们想了解汽车工业，不能只看最新的电动车，也得知道经典的燃油发动机是怎么工作的。Vue 2 里面包含的很多核心设计思想，比如响应式、组件化，其实是整个现代前端框架演进的基石。搞懂了它，再去看新东西，你会发现思路一下子就通了。
原野: 有道理，先理解经典，再看创新。那我们就从这个经典组合的实践部分开始吧。Element UI 是一个非常流行的 Vue 2.0 UI 组件库，能帮你快速搭建界面。对于项目集成，你可以选择全局引入，简单快捷；但在生产环境中，按需引入配合 Babel 插件，可以显著减小打包体积，这得益于“摇树”技术。在布局方面，Element UI 提供了24列的栅格系统，通过 `el-row` 和 `el-col` 就能轻松实现响应式布局。同时，像 `el-button`、`el-input` 和 `el-form` 这样的表单组件，支持双向数据绑定和强大的验证功能，让开发事半功倍。
晓曼: 没错，Element UI 的出现，可以说是极大地降低了 Vue 项目的开发门槛，尤其是那些需要快速产出界面的场景。它的栅格系统和表单组件，让开发者可以专注于业务逻辑，而不是在这些基础界面元素上重复造轮子。
原野: 你刚才提到了按需引入和全局引入的区别，以及“摇树”技术。这其实就引出了一个非常关键的优化点。对于刚接触 Vue 和 Element UI 的开发者来说，全局引入确实最简单。但一旦项目复杂起来，没有进行按需引入，最终打包出来的文件可能会非常庞大，直接影响用户访问的加载速度。所以，虽然全局引入方便，但从长远来看，掌握按需引入并配置好 Babel 插件，是实现高性能应用的关键一步。
晓曼: 嗯，对。这就像我们去超市，全局引入相当于把整个超市都搬回家，而按需引入就是只买你菜谱上需要的那几样菜。虽然开始的时候需要列个清单麻烦一点，但家里肯定清爽多了，找东西也快。
原野: 这个比喻很形象。确实，Element UI 的这些基础布局和表单组件，让构建一个功能完整的界面变得非常直观。那么，在展示数据和提供用户反馈方面，Element UI 又有哪些强大的组件呢？
晓曼: 哦，这部分也是它的强项。
原野: 好的，我们继续聊 Element UI。在展示结构化数据时，`el-table` 是一个非常强大的组件，它通过 `:data` 属性接收数据源，并用 `el-table-column` 来定义每一列的显示内容和表头，还可以通过 `stripe` 和 `border` 属性来增强表格的可读性。当需要用户进行重要操作或确认时，`el-dialog` 模态对话框就派上用场了，我们可以用 `:visible.sync` 来控制它的显示，并且可以通过 `:before-close` 钩子来处理关闭前的逻辑。另外，Element UI 还提供了 `$message` 组件，比如 `$message.success()` 或 `$message.error()`，用于提供非侵入式的反馈提示，这与需要用户立即响应的对话框是两种不同的反馈方式。
晓曼: 我觉得 Element UI 在数据展示和用户反馈这块设计得非常到位。特别是 `el-table`，它不仅仅是展示数据，还可以通过很多配置项让表格更美观、更易读。而 Message 组件，则是在很多场景下，用一种更优雅、干扰更小的方式替代了过去那种粗暴的 alert 弹窗，用户体验好太多了。
原野: 嗯，我明白了。一个会打断你，另一个只是轻轻提醒你。这就要求开发者去思考，什么时候需要强制用户处理，什么时候只需要给个状态更新就行。确实，Element UI 的这些组件大大简化了界面开发。那么，了解了如何使用这些组件，我们接下来就要深入到 Vue.js 2 的核心基础了，比如 Vue 实例和它的响应式系统，这对于理解 Element UI 的工作原理至关重要。
晓曼: 对，这才是真正有趣的地方，看看这些魔法是怎么实现的。
原野: 接下来，我们深入 Vue.js 2 的基础。任何一个 Vue 应用都是从 `new Vue()` 创建一个 Vue 实例开始的，这个实例会挂载到一个 DOM 元素上。Vue 最强大的地方在于它的响应式系统：我们通过 `data` 选项（必须是个函数，返回一个数据对象）来定义组件的状态，当这些状态改变时，Vue 能自动感知并更新视图。同时，`methods` 选项可以让我们定义各种函数，方便在模板中调用。在模板语法上，我们用 `{{ }}` 来插入数据，用 `v-bind`（或者冒号 `:`）来绑定 attribute，比如图片的 `src`。`v-model` 是实现表单双向绑定的利器。条件渲染方面，`v-if` 会真的在 DOM 中添加或移除元素，而 `v-show` 只是通过 CSS 来控制显示隐藏。列表渲染则离不开 `v-for`，并且一定要记得使用 `:key` 来优化性能。
晓曼: Vue 的响应式系统真的是太惊艳了，它让开发者从繁琐的 DOM 操作中解放出来，可以更专注于数据和逻辑。而且模板语法也很直观，写起来感觉就像在写增强版的 HTML，学习曲线非常平缓。
原野: 你刚才提到了 `v-if` 和 `v-show` 的区别，以及 `v-for` 配合 `:key` 的重要性。这其实就触及到了 Vue 性能优化的核心。`v-if` 适合不频繁切换的条件渲染，因为它销毁和创建 DOM 的成本较高，但它也意味着在条件不满足时，这部分内容不会占用任何资源。而 `v-show` 适合频繁切换的场景，它成本低，但元素始终存在于 DOM 中。至于 `:key`，它对于 Vue 的虚拟 DOM 算法至关重要，没有它，Vue 就无法高效地识别和复用列表中的元素，特别是在列表有增删改时，可能会导致状态混乱或性能问题。理解这些细微之处，是写出高效 Vue 代码的关键。
晓曼: 是的，这个 key 就好比给列表里的每个孩子都起了个名字。这样不管他们怎么排队，老师（Vue）都能准确地认出谁是谁，而不是简单粗暴地认为第一个位置永远是小明。这在有状态的组件列表里尤其重要。
原野: 没错，理解这些基础原理，能让我们更好地驾驭 Vue。那么，在 Vue.js 2 中，除了直接在模板中使用这些指令，还有哪些更高级的方式来处理数据逻辑和副作用呢？
晓曼: 这个嘛，就得聊聊 `computed` 和 `watch` 这对“兄弟”了。
原野: 在 Vue.js 2 中，处理数据逻辑主要有三种方式：`methods`、`computed` 和 `watch`。`methods` 是普通的函数，每次调用都会执行。`computed`（计算属性）非常适合处理派生状态，比如根据已有数据计算出一个新的值，它的结果会被缓存，性能很高，而且写法很声明式。而 `watch`（侦听器）则更适合在数据变化时执行副作用，比如发起 API 请求。一般来说，数据转换优先用 `computed`，执行异步操作才用 `watch`。此外，Vue 组件的生命周期也很有讲究，从创建到销毁，有 `created`、`mounted`、`updated`、`destroyed` 等钩子函数，可以在特定时机执行代码。最重要的是，Vue 的组件化思想，通过 `props` 向下传递数据，通过 `$emit` 向上传递事件，这是实现组件间通信的核心模式。
晓曼: `computed` 和 `watch` 的区别，确实是很多初学者容易混淆的地方。理解它们的适用场景，对于写出高效、易维护的代码至关重要。`computed` 的缓存机制，在处理大量数据计算时，优势非常明显。比如你有一个长列表，需要根据搜索框的内容去过滤，用 `computed` 就再合适不过了。
原野: 晓曼，你刚才提到的 `computed` 的缓存和 `watch` 的副作用处理，正好引出了 Vue 编程模型的一个核心差异：声明式 vs 命令式。`computed` 是声明式的，你告诉 Vue“这个状态应该是什么样的”，Vue 会自动帮你维护。而 `watch` 则是命令式的，你告诉 Vue“当这个状态变化时，你应该去做什么”。选择 `computed` 能让代码更简洁，并且利用了 Vue 的缓存机制，性能更好。只有当你需要执行一个不返回值的、有副作用的操作时，`watch` 才是首选。这种思想，对于理解 Vue 乃至其他现代框架的演进都非常有启发。
晓曼: 完全正确。简单来说，`computed` 是在回答“是什么”，而 `watch` 是在响应“发生了什么”。优先用 `computed`，会让你的代码意图更清晰。
原野: 掌握了 `computed` 和 `watch` 的精髓，以及组件的生命周期和通信方式，我们就基本掌握了 Vue.js 2 的核心。这些知识，即便 Vue 2 已停止支持，对于理解现代前端框架的演进，以及维护现有项目，依然具有非常重要的价值。晓曼，最后能帮我们快速总结一下今天聊到的几个关键要点吗？
晓曼: 当然。总结下来有这么几点。第一，在生产环境用 Element UI，记得用按需引入来优化打包体积。第二，Vue 的响应式系统是核心，`data` 必须是函数来保证组件数据独立。第三，`v-if` 是真正的销毁和创建，`v-show` 只是切换显示，而 `v-for` 循环一定要带上唯一的 `:key`。第四，也是最重要的一点，优先使用 `computed` 来处理派生数据，因为它有缓存且是声明式的；只有在需要执行异步操作等副作用时才用 `watch`。最后，记住 Vue 组件通信的黄金法则：“Props 向下传递，事件向上传递”。掌握了这几点，无论是维护老项目还是学习新技术，都会得心应手。