目录
一、Vue2核心基础：掌握这3个概念，入门就成功了一半
1. 响应式数据：Vue2的“灵魂”
2. 组件化：前端代码复用的“利器”
3. 生命周期：理解Vue实例的“一生”
二、实战案例：实现一个待办事项（TodoList）
1. 项目结构
2. 完整代码
3. 功能说明
三、Vue2开发避坑指南：5个高频坑点总结
1. 坑点1：data不是函数导致数据污染
2. 坑点2：props单向数据流被破坏
3. 坑点3：v-for未加key导致DOM更新异常
4. 坑点4：定时器未清理导致内存泄漏
5. 坑点5：异步操作中修改数据未触发视图更新
四、总结
前言：作为前端三大框架之一，Vue以其轻量、易用、渐进式的特性，成为很多前端开发者的入门首选。而Vue2作为长期稳定的经典版本，至今仍在大量企业项目中广泛应用。本文将从Vue2的核心概念出发，结合实战案例拆解核心知识点，同时总结开发中常见的坑点与解决方案，帮助新手快速上手并规避风险。全文干货密集，建议收藏后逐步消化。
一、Vue2核心基础：掌握这3个概念，入门就成功了一半
Vue2的核心思想是“数据驱动”和“组件化”，而要理解这两个思想，首先要掌握以下3个基础概念：
1. 响应式数据：Vue2的“灵魂”
Vue2的响应式核心是通过Object.defineProperty实现的数据劫持。简单来说，就是Vue会对data中的数据进行监听，当数据发生变化时，自动触发视图更新，无需手动操作DOM。
示例代码：
<div id="app"> <p>{{ message }}</p> <button @click="changeMsg">修改数据</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Vue2响应式数据测试' }, methods: { changeMsg() { this.message = '数据已更新，视图自动同步！'; } } }) </script>注意点：Vue2的响应式存在局限性，比如新增对象属性、删除属性、修改数组索引或长度时，无法触发视图更新。解决方案是使用Vue.set（新增属性）、Vue.delete（删除属性），或数组的变异方法（push、pop、splice等）。
2. 组件化：前端代码复用的“利器”
组件化是将复杂页面拆分为多个独立、可复用的小模块，每个模块负责自己的视图和逻辑，降低代码耦合度。Vue2中组件分为全局组件和局部组件。
全局组件示例：
// 全局注册组件 Vue.component('MyComponent', { template: '<div><h3>全局组件</h3><p>{{ msg }}</p></div>', data() { return { msg: '全局组件的数据' } } }) // 使用组件 new Vue({ el: '#app' })局部组件示例：
new Vue({ el: '#app', components: { // 局部注册组件 LocalComponent: { template: '<div><h3>局部组件</h3></div>' } } })组件通信：父组件向子组件传值通过props；子组件向父组件传值通过$emit触发自定义事件；非父子组件通信可使用EventBus（Vue.prototype.$bus = new Vue()）。
3. 生命周期：理解Vue实例的“一生”
Vue2实例从创建到销毁的过程称为生命周期，每个阶段会触发对应的钩子函数，开发者可在钩子函数中执行特定逻辑。核心钩子函数如下：
- beforeCreate：实例创建前，data和methods未初始化，无法访问。
- created：实例创建完成，data和methods已初始化，可访问数据，但DOM未挂载，无法操作DOM。适合发起初始化请求。
- mounted：DOM挂载完成，可操作DOM。常用於初始化DOM相关逻辑。
- beforeUpdate：数据更新前，视图未同步。
- updated：数据更新完成，视图已同步。
- beforeDestroy：实例销毁前，可执行清理工作（如清除定时器、取消请求）。
- destroyed：实例销毁完成，所有监听和子组件均被销毁。
二、实战案例：实现一个待办事项（TodoList）
结合上述核心知识点，我们实现一个简单的TodoList，涵盖数据绑定、事件处理、组件通信等功能。
1. 项目结构
拆分3个组件：父组件App、子组件TodoInput（添加待办）、子组件TodoList（展示待办列表）。
2. 完整代码
<div id="app"> <h2>Vue2 TodoList</h2> <todo-input @add-todo="addTodo"></todo-input> <todo-list :todos="todos" @delete-todo="deleteTodo"></todo-list> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> // 子组件：添加待办 const TodoInput = { template: ` <div> <input v-model="inputVal" placeholder="请输入待办事项" /> <button @click="handleAdd">添加</button> </div> `, data() { return { inputVal: '' } }, methods: { handleAdd() { if (!this.inputVal.trim()) return; // 向父组件传值 this.$emit('add-todo', this.inputVal); this.inputVal = ''; } } } // 子组件：展示待办列表 const TodoList = { template: ` <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="handleDelete(index)">删除</button> </li> </ul> `, // 接收父组件传值 props: { todos: { type: Array, required: true } }, methods: { handleDelete(index) { this.$emit('delete-todo', index); } } } // 父组件 new Vue({ el: '#app', components: { TodoInput, TodoList }, data: { todos: ['学习Vue2核心知识点', '完成TodoList案例'] }, methods: { addTodo(val) { this.todos.push(val); }, deleteTodo(index) { this.todos.splice(index, 1); } } }) </script>3. 功能说明
通过子组件TodoInput输入待办事项，点击添加按钮，通过$emit将数据传递给父组件，父组件通过push方法更新todos数组；TodoList组件通过props接收父组件的todos数据，用v-for渲染列表，点击删除按钮时，通过$emit将索引传递给父组件，父组件用splice方法删除对应数据。
三、Vue2开发避坑指南：5个高频坑点总结
1. 坑点1：data不是函数导致数据污染
错误写法：组件中data写成对象（仅根实例可写对象）。
正确写法：组件中data必须是函数，返回一个新对象，避免多个组件实例共享同一数据。
2. 坑点2：props单向数据流被破坏
props是单向的，子组件不能直接修改props的值。
解决方案：子组件通过$emit通知父组件修改数据，或在子组件中定义局部变量接收props的值。
3. 坑点3：v-for未加key导致DOM更新异常
v-for渲染列表时，key是DOM节点的唯一标识，缺失key会导致Vue复用错误的DOM节点，引发视图异常。
解决方案：使用唯一值作为key（如id），避免使用index作为key（index变化时会重新渲染）。
4. 坑点4：定时器未清理导致内存泄漏
在mounted中创建的定时器，若在组件销毁时未清理，会导致定时器持续运行，造成内存泄漏。
解决方案：在beforeDestroy钩子函数中清除定时器。
5. 坑点5：异步操作中修改数据未触发视图更新
在异步操作（如setTimeout、axios请求）中修改数据时，若数据是新增的属性，Vue2无法监听。
解决方案：使用Vue.set(obj, key, value)新增属性。
四、总结
本文通过核心知识点讲解、实战案例拆解和坑点总结，帮助大家快速掌握Vue2的核心用法。要想真正学好Vue2，建议做好以下两点：一是多动手实践，将案例代码亲自敲一遍，理解每一行代码的含义；二是深入源码理解原理，比如响应式数据的实现机制、生命周期的执行流程等，这能让你在开发中更游刃有余。
