我会按照由浅入深、从基础到进阶的逻辑分模块逐步讲解先从 Vue2 的基础入门部分开始确保每个知识点都有清晰的概念解释和可运行的代码示例一、Vue2 基础入门1. Vue2 核心定位Vue2 是一套渐进式 JavaScript 框架“渐进式” 按需使用功能无需一次性引入全部核心聚焦视图层特点是易上手、轻量、与现有项目兼容性好是 2020 年前前端主流的 MVVM 框架。2. 环境搭建两种核心方式方式 1CDN 引入快速上手 / 小型项目无需构建工具直接在 HTML 中引入 Vue2 源码适合学习和简单场景!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleVue2 基础示例/title !-- 引入Vue2稳定版2.6.14开发版包含调试工具 -- script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script /head body !-- Vue挂载的DOM容器 -- div idapp{{ message }}/div script // 创建Vue实例核心 const vm new Vue({ el: #app, // 挂载点指定Vue接管的DOM元素CSS选择器/DOM对象 data: { // 响应式数据Vue会劫持这些属性数据变化自动更新视图 message: Hello Vue2! } }); /script /body /html方式 2Vue CLI 搭建工程化 / 中大型项目Vue2 推荐使用Vue CLI 4.x5.x 默认适配 Vue3步骤如下# 1. 安装Node.js推荐v14Vue2不兼容过高Node版本 # 2. 全局安装Vue CLI 4 npm install -g vue/cli4 # 3. 创建Vue2项目 vue create my-vue2-project # 4. 选择模板选「Default (Vue 2)」默认Vue2模板或手动配置 # 5. 进入项目目录 cd my-vue2-project # 6. 启动开发服务器 npm run serve # 7. 打包生产环境代码 npm run build3. Vue 实例核心配置Vue 实例是 Vue2 的核心载体所有功能都围绕实例展开核心配置项如下const vm new Vue({ // 1. 挂载点必选也可通过vm.$mount(#app)手动挂载 el: #app, // 2. 响应式数据核心组件中data必须是函数避免数据共享 data: { name: Vue2, age: 8, user: { id: 1, name: 张三 } }, // 3. 方法用于事件处理/业务逻辑this指向Vue实例 methods: { sayHello() { alert(Hello ${this.name}!); } }, // 4. 计算属性基于依赖派生数据有缓存特性 computed: { fullInfo() { return ${this.name} 发布已有${this.age}年; } }, // 5. 侦听器监听数据变化执行异步/复杂逻辑 watch: { age(newVal, oldVal) { console.log(年龄从${oldVal}变为${newVal}); } }, // 6. 生命周期钩子实例生命周期不同阶段的回调后续详解 created() { console.log(Vue实例已创建DOM未挂载); } });4. 模板语法Vue2 的视图核心Vue2 模板语法分为插值语法渲染文本和指令语法操作 DOM是连接数据和视图的桥梁。1插值语法格式{{ 表达式 }}支持 JavaScript 表达式不能是语句如 if/for用于渲染文本div idapp !-- 基础文本渲染 -- p{{ name }}/p !-- JavaScript表达式 -- p{{ age 1 }}/p !-- 运算 -- p{{ name.toUpperCase() }}/p !-- 方法调用 -- p{{ isShow ? 显示 : 隐藏 }}/p !-- 三元表达式 -- !-- 错误示例不支持语句 -- !-- p{{ if (age 5) { return 老版本 } }}/p -- /div2指令语法以v-开头的特殊属性用于操作 DOM绑定属性 / 事件 / 条件渲染等核心指令如下指令作用简写示例v-bind单向绑定 DOM 属性数据→视图: 属性名a :hrefurl链接/av-model双向数据绑定仅表单元素无input v-modelusernamev-on绑定事件事件名button clickhandleClickv-if/v-else条件渲染销毁 / 创建 DOM无p v-ifisShow显示/pv-show条件渲染修改 display无p v-showisShow显示/pv-for列表渲染无li v-foritem in list :keyitem.id{{ item }}/li指令示例代码div idapp !-- 1. v-bind单向绑定 -- img :srcimgUrl altVuelogo !-- 2. v-model双向绑定表单专属 -- input v-model.trimusername placeholder用户名自动去空格 p你输入的用户名{{ username }}/p !-- 3. v-on事件绑定 -- button clickcount计数1/button p计数{{ count }}/p !-- 4. 条件渲染 -- p v-ifscore 90优秀/p p v-else-ifscore 80良好/p p v-else及格/p !-- 5. 列表渲染必须加:key -- ul li v-for(item, index) in fruitList :keyitem.id {{ index 1 }} - {{ item.name }} /li /ul /div script new Vue({ el: #app, data: { imgUrl: https://cn.vuejs.org/images/logo.png, username: , count: 0, score: 85, fruitList: [{ id: 1, name: 苹果 }, { id: 2, name: 香蕉 }] } }); /script关键说明v-for必须加:key推荐用唯一标识如 id避免用 index列表排序 / 删除时会导致 DOM 复用问题v-ifvsv-showv-if惰性渲染初始条件不满足则不渲染 DOM切换时销毁 / 重建 DOM → 适合低频率切换v-show初始渲染 DOM切换时修改display: none→ 适合高频率切换。5. 数据绑定Vue2 的绑定分为两种核心类型单向绑定v-bind数据→视图视图修改不会同步回数据双向绑定v-model数据↔视图仅适用于表单元素input/select/textarea 等。v-model本质是v-bind v-on的语法糖等价写法!-- 原始写法 -- input v-modelmsg !-- 等价拆解 -- input :valuemsg inputmsg $event.target.valuev-model常用修饰符.trim自动去除输入内容的首尾空格.number将输入值转为数字默认是字符串.lazy失去焦点后同步数据默认是 input 事件实时同步。示例input v-model.trimusername placeholder用户名 input v-model.numberage typenumber placeholder年龄 input v-model.lazycontent placeholder失去焦点后同步6. 计算属性computed基于已有数据派生新数据核心特性是缓存依赖不变时多次访问只计算一次对比methods更高效div idapp !-- 计算属性缓存多次访问只执行一次 -- p{{ reversedMsg }}/p p{{ reversedMsg }}/p !-- 方法每次访问都重新执行 -- p{{ getReversedMsg() }}/p p{{ getReversedMsg() }}/p /div script new Vue({ el: #app, data: { msg: Hello Vue2 }, computed: { reversedMsg() { console.log(计算属性执行); return this.msg.split().reverse().join(); } }, methods: { getReversedMsg() { console.log(方法执行); return this.msg.split().reverse().join(); } } }); /script 输出日志 计算属性执行 方法执行 方法执行计算属性支持手动设置setter默认只有gettercomputed: { fullName: { // 获取值默认 get() { return this.firstName this.lastName; }, // 设置值 set(newVal) { const [first, last] newVal.split( ); this.firstName first; this.lastName last; } } } // 调用settervm.fullName Zhang San → firstNameZhang, lastNameSan7. 侦听器watch监听数据变化执行异步 / 复杂逻辑如请求接口、定时器弥补计算属性无法处理异步的短板watch: { // 基础监听监听简单数据类型 msg(newVal, oldVal) { console.log(msg从${oldVal}变为${newVal}); // 异步示例延迟1秒打印 setTimeout(() { console.log(异步处理, newVal); }, 1000); }, // 深度监听监听对象/数组内部属性变化 user: { deep: true, // 开启深度监听 immediate: true, // 实例初始化时立即执行一次 handler(newVal, oldVal) { console.log(user对象变化, newVal); } }, // 监听对象的单个属性 user.name(newVal) { console.log(用户名变化, newVal); } }总结Vue2 基础核心要点Vue2 环境搭建分 CDN快速和 Vue CLI 4.x工程化两种方式工程化项目是中大型开发的主流选择模板语法分为插值语法{{表达式}}和指令语法v - 开头v-for 必须加:keyv-if/v-show 按需选择计算属性computed有缓存特性适合派生数据侦听器watch适合处理异步 / 复杂逻辑支持深度监听和初始执行v-model 是 v-bind v-on 的语法糖仅适用于表单元素常用修饰符有.trim/.number/.lazy。接下来我会聚焦组件系统核心、生命周期钩子、全局 API、Vue Router、Vuex这些关键内容依然保持概念 示例的形式确保易懂且可落地。二、Vue2 组件系统核心进阶组件是 Vue2 的核心特性用于复用代码、拆分复杂页面一个 Vue 项目本质是组件树的组合。1. 组件的定义与注册1全局组件全局可用适合通用组件如按钮、输入框// 全局注册组件Vue实例创建前注册 Vue.component(my-button, { // 组件的data必须是函数避免多个组件实例共享数据 data() { return { count: 0 }; }, // 模板根节点只能有一个 template: button clickcount 点击了{{ count }}次 /button }); // 全局组件可直接在任意Vue实例中使用 new Vue({ el: #app });使用div idapp my-button/my-button /div2局部组件仅在注册的作用域内可用推荐// 定义局部组件 const MyCard { // props接收父组件传递的参数只读 props: { title: { type: String, // 类型校验 required: true, // 必填 default: 默认标题 // 默认值非必填时生效 }, content: String }, template: div classcard h3{{ title }}/h3 p{{ content }}/p /div }; // 在Vue实例中局部注册 new Vue({ el: #app, components: { // 键组件名使用时的标签名值组件对象 MyCard // 简写ES6等价于 MyCard: MyCard } });使用div idapp my-card titleVue2组件 content局部组件示例/my-card /div3组件命名规范定义时推荐大驼峰如MyButton或短横线my-button使用时HTML 中推荐短横线my-button单文件组件中可混用。2. 组件通信Vue2 核心难点组件间通信是项目开发的核心需求不同关系的组件通信方式不同组件关系通信方式适用场景父→子props父向子传递数据 / 方法子→父$emit 自定义事件子向父传递数据 / 触发父方法兄弟组件父组件中转 / EventBus兄弟间数据共享跨级 / 任意组件EventBus / Vuex复杂场景的数据共享1父→子propsprops 是只读的子组件不能直接修改需通过子→父通信让父修改支持类型校验、默认值、自定义校验。父组件template child :msgparentMsg :listparentList/child /template script import Child from ./Child.vue; export default { components: { Child }, data() { return { parentMsg: 父组件传递的消息, parentList: [1, 2, 3] }; } }; /script子组件Child.vuetemplate div p{{ msg }}/p ul li v-foritem in list :keyitem{{ item }}/li /ul /div /template script export default { // props 写法1简单数组无校验 // props: [msg, list] // props 写法2对象带校验推荐 props: { msg: { type: String, required: true, default: 默认值 }, list: { type: Array, // 引用类型默认值需用函数返回避免共享 default() { return []; }, // 自定义校验 validator(value) { return value.length 5; // 校验列表长度不超过5 } } } }; /script2子→父$emit 自定义事件子组件通过this.$emit(自定义事件名, 数据)触发事件父组件通过自定义事件名监听。子组件Child.vuetemplate button clicksendToParent向父组件传值/button /template script export default { data() { return { childMsg: 子组件的消息 }; }, methods: { sendToParent() { // 触发自定义事件传递数据 this.$emit(child-event, this.childMsg, 123); } } }; /script父组件template child child-eventhandleChildEvent/child p子组件传递的值{{ childData }}/p /template script import Child from ./Child.vue; export default { components: { Child }, data() { return { childData: }; }, methods: { handleChildEvent(msg, num) { console.log(num); // 123 this.childData msg; // 接收子组件数据 } } }; /script3兄弟组件通信EventBus核心思路创建一个空的 Vue 实例作为 “事件总线”所有组件通过它触发 / 监听事件。步骤 1创建 EventBussrc/bus.jsimport Vue from vue; // 创建空Vue实例作为事件总线 export default new Vue();步骤 2组件 A发送方template button clicksendMsg给组件B传值/button /template script import Bus from ./bus.js; export default { methods: { sendMsg() { // 触发事件 Bus.$emit(bus-event, 来自组件A的消息); } } }; /script步骤 3组件 B接收方template p{{ msg }}/p /template script import Bus from ./bus.js; export default { data() { return { msg: }; }, mounted() { // 监听事件 Bus.$on(bus-event, (data) { this.msg data; }); }, // 销毁组件时移除监听避免内存泄漏 beforeDestroy() { Bus.$off(bus-event); } }; /script4跨级 / 任意组件Vuex后续详解复杂项目推荐使用 Vuex 统一管理状态替代 EventBus。3. 插槽Slot组件内容分发插槽用于让父组件向子组件传递HTML 结构实现组件内容的灵活定制。1默认插槽子组件MySlot.vuetemplate div classslot-container !-- 插槽占位符 -- slot默认内容父组件未传内容时显示/slot /div /template父组件使用my-slot p父组件传递的HTML内容/p /my-slot2具名插槽多个插槽时通过name区分Vue2.6 推荐用v-slot简写#。子组件template div classcard slot nameheader/slot slot/slot !-- 默认插槽name为default -- slot namefooter/slot /div /template父组件使用my-slot !-- 具名插槽v-slot:name 简写 #name -- template #header h3卡片标题/h3 /template !-- 默认插槽 -- p卡片内容/p !-- 具名插槽 -- template #footer p卡片底部/p /template /my-slot3作用域插槽子组件向父组件传递数据父组件自定义插槽内容带数据。子组件template div !-- 子组件传递数据到插槽 -- slot :listfruitList :msghelloMsg/slot /div /template script export default { data() { return { fruitList: [苹果, 香蕉, 橙子], helloMsg: Hello Slot }; } }; /script父组件my-slot !-- 接收子组件传递的插槽数据 -- template #defaultslotProps ul li v-foritem in slotProps.list :keyitem{{ item }}/li /ul p{{ slotProps.msg }}/p /template /my-slot4. 动态组件与异步组件1动态组件componentis根据数据动态切换组件适合 tab 切换等场景template div button clickcurrentComp comp-a组件A/button button clickcurrentComp comp-b组件B/button !-- 动态组件 -- component :iscurrentComp/component /div /template script import CompA from ./CompA.vue; import CompB from ./CompB.vue; export default { components: { CompA, CompB }, data() { return { currentComp: comp-a }; } }; /script2异步组件按需加载优化性能避免首屏加载所有组件按需加载减少初始包体积export default { components: { // 异步加载组件 AsyncComp: () import(./AsyncComp.vue) } };三、Vue2 生命周期钩子生命周期钩子是 Vue 实例从创建→挂载→更新→销毁全过程的回调函数用于在不同阶段执行逻辑。1. 生命周期流程图核心2. 核心钩子详解附使用场景export default { // 1. beforeCreate beforeCreate() { console.log(beforeCreate, this.msg); // undefined数据未初始化 // 场景无无法访问数据/方法 }, // 2. created created() { console.log(created, this.msg); // 可访问数据 // 场景初始化数据、调用接口无需操作DOM this.fetchData(); }, // 3. beforeMount beforeMount() { console.log(beforeMount, document.getElementById(app)); // DOM未渲染完成 // 场景预编译模板极少用 }, // 4. mounted mounted() { console.log(mounted, document.getElementById(app)); // DOM已渲染 // 场景操作DOM如初始化第三方插件echarts、swiper this.initEcharts(); }, // 5. beforeUpdate beforeUpdate() { // 场景更新前获取旧DOM状态极少用 }, // 6. updated updated() { // 场景数据更新后重新操作DOM如重新计算第三方插件尺寸 }, // 7. beforeDestroy beforeDestroy() { // 场景清理资源定时器、EventBus监听、第三方插件实例 clearInterval(this.timer); Bus.$off(bus-event); }, // 8. destroyed destroyed() { // 场景无实例已销毁 }, data() { return { msg: 生命周期示例 }; }, methods: { fetchData() { /* 调用接口 */ }, initEcharts() { /* 初始化echarts */ } } };3. 关键注意点mounted不保证所有子组件都挂载完成如需等待所有组件挂载可使用this.$nextTick()避免在updated中修改数据会导致无限循环组件销毁前必须清理定时器 / 事件监听避免内存泄漏。四、Vue2 全局 API 与常用实例方法1. 全局 APIVue.xxxAPI作用示例Vue.component全局注册组件Vue.component(MyBtn, { ... })Vue.directive全局自定义指令Vue.directive(focus, { ... })Vue.filter全局过滤器格式化数据Vue.filter(date, (val) { ... })Vue.use安装 Vue 插件如 VueRouter、VuexVue.use(VueRouter)Vue.set解决响应式数据新增属性不更新视图问题Vue.set(obj, newKey, value)Vue.delete删除对象属性并触发视图更新Vue.delete(obj, key)示例自定义指令全局// 注册全局指令v-focus自动聚焦输入框 Vue.directive(focus, { // 指令绑定到元素且插入DOM时触发 inserted(el) { el.focus(); // el是绑定指令的DOM元素 } }); // 使用 input v-focus示例过滤器全局// 注册全局过滤器格式化日期 Vue.filter(formatDate, (value) { if (!value) return ; const date new Date(value); return ${date.getFullYear()}-${date.getMonth()1}-${date.getDate()}; }); // 使用 p{{ createTime | formatDate }}/p2. 常用实例方法this.xxx方法作用示例$mount手动挂载 Vue 实例vm.$mount(#app)$nextTick等待 DOM 更新后执行回调this.$nextTick(() { ... })$refs获取 DOM 元素 / 组件实例this.$refs.myInput$emit触发自定义事件子→父通信this.$emit(event, data)on/off监听 / 移除事件EventBusthis.$on(event, callback)$watch动态添加侦听器this.$watch(msg, callback)示例$nextTickexport default { data() { return { show: false }; }, methods: { toggleShow() { this.show true; // 此时DOM未更新直接获取会失败 console.log(this.$refs.box); // undefined // 等待DOM更新后执行 this.$nextTick(() { console.log(this.$refs.box); // 可获取DOM }); } } };总结Vue2 进阶核心要点组件通信父→子用 props只读子→父用 $emit兄弟用 EventBus跨级 / 复杂场景用 Vuex插槽默认插槽用于简单内容分发具名插槽区分多个插槽作用域插槽实现子向父传数据的自定义内容生命周期created 适合初始化数据 / 调接口mounted 适合操作 DOMbeforeDestroy 必须清理资源定时器 / 事件全局 APIVue.set 解决响应式新增属性问题自定义指令用于复用 DOM 操作逻辑过滤器用于数据格式化实例方法等待更新refs 获取 DOM / 组件实例是日常开发的高频工具。Vue Router、Vuex、响应式原理、工程化常用配置、常见坑 优化。五、Vue RouterVue2 路由Vue2 配套路由vue-router3.x1. 基本安装与使用npm i vue-router3① 路由配置router/index.jsimport Vue from vue import VueRouter from vue-router import Home from ../views/Home.vue import About from ../views/About.vue Vue.use(VueRouter) const routes [ { path: /, name: Home, component: Home }, { path: /about, name: About, component: About }, // 404 { path: *, redirect: / } ] const router new VueRouter({ mode: history, // 去掉 # routes }) export default router② 入口 main.js 挂载import router from ./router new Vue({ router, render: h h(App) }).$mount(#app)③ 页面使用!-- 跳转链接 -- router-link to/首页/router-link router-link to/about关于/router-link !-- 路由出口 -- router-view/router-view2. 路由跳转方式① 声明式标签router-link to/about关于/router-link② 编程式JS// 字符串 this.$router.push(/about) // 对象 this.$router.push({ path: /about }) // 命名路由 this.$router.push({ name: About })3. 动态路由{ path: /user/:id, name: User, component: () import(../views/User.vue) }获取参数this.$route.params.id4. 路由传参① params必须用 namethis.$router.push({ name: User, params: { id: 123 } })② query会显示在地址栏this.$router.push({ path: /user, query: { id: 123 } })5. 路由守卫权限必用① 全局前置守卫router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() } else if (!token) { next(/login) } else { next() } })② 组件内守卫beforeRouteEnter(to, from, next) { // 进入前 next() } beforeRouteUpdate(to, from, next) { // 路由复用组件时 next() } beforeRouteLeave(to, from, next) { // 离开页面 next() }六、VuexVue2 状态管理Vue2 配套vuex3.xnpm i vuex31. 标准结构5 大件state数据getters计算属性mutations同步修改 state唯一入口actions异步操作调接口modules模块化store/index.jsimport Vue from vue import Vuex from vuex Vue.use(Vuex) export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, modules: {} })main.js 挂载import store from ./store new Vue({ store, render: h h(App) }).$mount(#app)2. 基础用法示例state: { count: 0, userInfo: null }, getters: { doubleCount: state state.count * 2 }, mutations: { SET_COUNT(state, val) { state.count val } }, actions: { async getInfo({ commit }) { const res await api.getUserInfo() commit(SET_USERINFO, res.data) } }组件中使用// 取数据 this.$store.state.count // 调用同步 this.$store.commit(SET_COUNT, 10) // 调用异步 this.$store.dispatch(getInfo)辅助函数最常用import { mapState, mapGetters, mapMutations, mapActions } from vuex computed: { ...mapState([count]), ...mapGetters([doubleCount]) }, methods: { ...mapMutations([SET_COUNT]), ...mapActions([getInfo]) }七、Vue2 响应式原理面试必考核心Object.defineProperty()递归劫持对象所有属性数组通过重写 7 个方法实现响应式缺陷高频面试对象新增 / 删除属性无法响应数组通过下标修改无法响应数组修改 length无法响应解决方案// 对象新增 this.$set(this.obj, newKey, value) Vue.set(this.obj, newKey, value) // 数组下标修改 this.$set(this.arr, index, value) // 删除属性 this.$delete(this.obj, key)八、Vue2 常用高级特性1. 自定义指令Vue.directive(focus, { inserted(el) { el.focus() } })使用input v-focus2. 过滤器格式化文本Vue.filter(date, (val) { return new Date(val).toLocaleDateString() }){{ time | date }}3. mixin混入抽离公共逻辑const myMixin { data() { return { a:1 } }, created() { ... } } export default { mixins: [myMixin] }4. $nextTickDOM 更新后执行this.show true this.$nextTick(() { // 此时 DOM 已渲染 })5. ref / $refsdiv refbox/divthis.$refs.box // 获取 DOM九、Vue2 工程化 优化面试 实战1. 路由懒加载component: () import(../views/Home.vue)2. 打包优化图片压缩第三方库 CDN关闭 sourcemapgzip 压缩3. 页面优化v-show 替代高频 v-ifv-for 必须 key大数据列表使用虚拟滚动防抖节流销毁前清除定时器、事件监听4. 样式隔离style scoped /* 只作用当前组件 */ /style十、Vue2 常见坑必看data 必须是函数否则组件数据共享污染props 不能直接改要 $emit 让父改对象新增属性要用$set数组不要用下标改不要在updated里改数据会死循环定时器、监听事件要在beforeDestroy清除异步 DOM 操作必须用$nextTick十一、Vue2 完整知识体系总结你可以直接背模板语法插值、指令、事件、修饰符数据data、computed、watch组件注册、props、$emit、slot生命周期created /mounted/beforeDestroy路由vue-router3、守卫、传参状态Vuex3、5 大件、辅助函数响应式Object.defineProperty、缺陷与修复工程化懒加载、优化、打包、跨域