前端Vue培训记录

以下内容基于公司内部Vue培训整理，涵盖核心知识点与实践要点，建议优先参考

• 主流框架对比

  React：ALL IN JS，灵活性强，适合复杂动态应用。

  Angular：架构清晰但层级多，适合大型企业级项目。

  Vue：结合React灵活性与Angular模块化，学习曲线平缓。

• 关键工具链

  Node.js：基于谷歌V8引擎，使JS可运行在服务端。

  Webpack：前端打包工具，支持模块化拆分JS、编译开发环境代码。

  Vue单页应用（SPA）：

  本质为单个HTML文件，通过路由切换视图，无页面刷新。

  核心思想：数据驱动视图，减少直接DOM操作，采用单向数据流。

• Vue CLI脚手架

  Vue CLI 3.0+：提供标准化项目架构，自动生成依赖配置。

• ES6常用语法

  变量声明：var → let/const。

  箭头函数：解决this指向问题。

  异步处理：Promise避免回调地狱。

  数组解构：简化数据提取。

• 路由作用与原理

  通过路径匹配加载对应模块，支持两种模式：

  Hash模式：URL带#，兼容性好。

  History模式：URL更简洁，需服务器配置支持。

• 基础配置

  定义路由规则：routes: [{ path: '/', component: Home }]。

• 路由守卫

  全局守卫：

  beforeEach：路由跳转前触发。

  afterEach：跳转后触发。

  组件内守卫：

  beforeRouteEnter：进入组件前触发。

  beforeRouteLeave：离开组件前触发。

• 动态路由

  使用this.$router.addRoutes动态添加顶级路由。

• 缓存控制

  <keep-alive>配合activated/deactivated生命周期钩子优化性能。

• 条件与循环指令

  v-if：条件渲染，动态创建/销毁DOM。

  v-show：通过CSS切换显示，适合频繁切换场景。

  v-for：列表渲染，需绑定:key提升性能。

• 事件绑定

  @click或v-on:click：绑定点击事件。

  修饰符：.stop（阻止冒泡）、.prevent（阻止默认行为）。

• 数据绑定

  v-bind或:：动态绑定属性（如:class、:style）。

  v-model：表单输入双向绑定（语法糖，本质是value+@input）。

• 三元运算

  在模板中直接使用{{ condition ? 'A' : 'B' }}。

• 核心属性

  data：存储响应式数据，仅在created阶段初始化一次。

  methods：定义方法，通过this访问实例属性。

  computed：计算属性，基于依赖缓存结果，避免重复计算。

  watch：监听数据变化，执行异步或复杂逻辑（慎用深度监听）。

  filters：格式化数据（如日期、货币），注意this指向问题。

• 生命周期钩子

  常用阶段：

  created：初始化数据，不触发重新渲染。

  mounted：操作DOM，但可能触发额外渲染。

  beforeDestroy：清理定时器或事件监听。

• 组件注册

  全局注册：Vue.component('my-comp', {...})。

  局部注册：在components选项中定义。

• 组件通信

  Props：父向子传递数据（可配合.sync修饰符实现双向绑定）。

  $emit：子向父传递事件，父组件通过@event监听。

  $refs：父组件直接访问子组件方法或属性。

• 语法糖

  v-model：简化表单输入绑定（本质是value+@input）。

• 核心概念

  State：单一状态树，存储全局数据。

  Mutations：同步修改State的唯一方法（需提交commit）。

  Actions：处理异步逻辑，通过dispatch触发Mutations。

• 使用场景

  跨组件共享数据（如用户登录状态）。

  复杂状态逻辑拆分（如购物车管理）。

• AXIOS核心特性

  基于Promise的HTTP客户端，支持浏览器和Node.js。

  自动转换JSON数据，拦截请求/响应。

• 封装建议

  统一处理错误（如网络异常、状态码非200）。

  配置全局请求/响应拦截器。

  示例代码：

  axios.interceptors.request.use(config => { config.headers.Authorization = localStorage.token; return config;});

• 学习建议：

  优先掌握数据驱动视图与组件化思想。

  结合官方文档与实战项目理解生命周期与状态管理。

  深入AXIOS封装与Vue Router高级用法（如路由懒加载）。

• 扩展方向：

  性能优化（如虚拟滚动、代码分割）。

  TypeScript集成提升代码可维护性。