一、Vue.js 基础入门​

1. 框架核心理念​

Vue 是一套渐进式 JavaScript 框架，核心优势在于 “易用性、灵活性、高效性”，核心思想是数据驱动视图和组件化开发：​

• 数据驱动：通过绑定数据状态（data）自动更新 DOM，无需手动操作 DOM（告别 jQuery 时代的 DOM 操作冗余）；​

• 组件化：将页面拆分为独立可复用的组件，降低耦合度，提升开发效率和维护性。​

2. 环境搭建与项目创建​

• 开发环境：Node.js（≥14.x）+ npm/yarn + 编辑器（VSCode 推荐安装 Vetur/Volar 插件）；​

• 项目创建方式：​

• 快速原型开发：vue create 项目名（官方脚手架，支持自定义配置）；​

• 可视化创建：vue ui（通过图形界面配置项目，适合新手）；​

• 引入方式：CDN 引入（适合小型项目，="https://cdn.jsdelivr.net/npm/vue@2"></script>）。​

3. 核心基础语法​

• 模板语法：​

• 文本插值：{{ 变量名 }}（支持表达式，如{{ num + 1 }}、{{ msg.split('').reverse().join('') }}）；​

• 指令：以v-开头，核心指令如下：​

​

指令​	作用​	示例​
v-bind​	绑定属性（可简写为:）​	Url" :class="{ active: isActive }">​
v-on​	绑定事件（可简写为@）​	click="handleClick">点击</button>​
v-model​	表单双向绑定（仅适用于表单元素）​	" type="text">​
v-if/v-else​	条件渲染（销毁 / 创建 DOM）​	`v-if="isShow"> 显示​

​

• 计算属性与侦听器：​

• 计算属性（computed）：基于依赖缓存的响应式数据，适合复杂逻辑计算（如筛选列表、格式化数据），示例：​

​

• 侦听器（watch）：监听数据变化并执行副作用（如异步请求、日志打印），支持深度监听，示例：​

​

二、Vue 核心特性（组件化与通信）​

1. 组件化开发​

• 组件定义：​

• 全局组件：`Vue.component ('my-component', { template: ' 组件；​

• 局部组件：在 Vue 实例的components选项中注册，仅当前组件可用，示例：​

• 组件生命周期（Vue2 为例，共 11 个钩子）：​

• 常用核心钩子：​

• created：实例创建完成（数据已初始化，DOM 未生成，可发起异步请求）；​

• mounted：DOM 挂载完成（可操作 DOM，如初始化第三方插件）；​

• updated：数据更新导致 DOM 重新渲染后触发；​

• destroyed：组件销毁前（解绑事件、清除定时器等）。​

2. 组件通信方式​

​

通信场景​	推荐方式​	示例​
父组件 → 子组件​	props + 自定义事件（$emit）​	父：parentMsg" @send="handleChildMsg">；子：this.$emit('send', childMsg)​
子组件 → 父组件​	自定义事件（$emit）​	同上​
兄弟组件通信​	事件总线（Vue.prototype.$bus）或 Vuex​	this.$bus.$emit('eventName', data)；this.$bus.$on('eventName', callback)​
跨层级组件通信​	provide/inject 或 Vuex​	父：provide() { return { theme: 'dark' } }；子：inject: ['theme']​
复杂项目全局状态管理​	Vuex/Pinia​	统一管理用户信息、全局配置等状态​

​

三、Vue 实战核心技能​

1. 路由管理（Vue Router）​

• 核心作用：实现单页应用（SPA）的页面跳转，无需刷新浏览器。​

• 基本使用：​

1. 安装：npm install vue-router@3（Vue2 对应 vue-router3，Vue3 对应 vue-router4）；​

1. 配置路由规则：​

​

​

1. 路由跳转：​

• 声明式：<router-link to="/detail/1">跳转到详情</router-link>；​

• 编程式：this.$router.push('/detail/1') 或 this.$router.replace('/detail/1')（不留下历史记录）；​

1. 路由守卫：控制路由访问权限（如登录校验），示例：​

​

​

2. 状态管理（Vuex）​

• 核心概念（五大模块）：​

• state：存储全局状态（如userInfo、theme）；​

• mutations：修改 state 的唯一途径（同步操作），示例：mutations: { setUser(state, user) { state.user = user; } }；​

• actions：处理异步操作（如接口请求），通过commit调用 mutations，示例：​

• getters：对 state 进行计算处理（类似 computed）；​

• modules：拆分模块（适合大型项目，避免 state 过于臃肿）。​

• 使用方式：在组件中通过this.$store.state访问状态，this.$store.dispatch('fetchUser')调用 action。​

3. 网络请求（Axios）​

• Vue 项目中常用 Axios 作为网络请求库，需封装请求拦截器（添加 token）和响应拦截器（统一错误处理）：​

​

四、Vue 进阶技巧与避坑点​

1. 进阶技巧​

• 自定义指令：封装通用 DOM 操作（如防抖按钮、图片懒加载），示例：​

• 混入（Mixin）：抽取多个组件的公共逻辑（如加载状态、分页逻辑），避免重复代码；​

• Vue3 新特性（可选进阶）：Composition API（setup 函数、ref/reactive、watchEffect）、Teleport、Suspense 等。​

2. 常见避坑点​

• v-for 与 v-if 不能同时使用在同一元素（v-for 优先级更高，导致性能问题）；​

• 组件 data 必须是函数（否则多个组件实例共享同一数据）；​

• v-model 绑定对象属性时，需确保对象已初始化（避免 “响应式丢失”，可使用Vue.set或this.$set）；​

• 路由跳转时，动态路由参数变化不会触发组件重新渲染（需通过watch $route或beforeRouteUpdate钩子处理）；​

• Vuex 的 mutations 不能写异步代码（异步逻辑必须放在 actions 中）。