Vuejs学习路线总结

一、vue学习中的知识点：
1. Vue起步
  1. 首先使用Vue编写一个属于自己的Hello World
  2. Vue开发TodoList
  3. MVVM设计模式
  4. 前端组件化
  5. 组件化思维修改TodoList
  6. 简单的父子组件传值
2. Vue基础
  1. Vue实例
  2. 文本与属性绑定
  3. Vue中的生命周期函数
  4. Vue的模版语法
  5. 计算属性（ computed），方法与侦听器（watch）
  6. 计算属性的setter和getter
  7. Class与Style样式绑定，条件与列表渲染
  8. Vue中的set方法
  9. 事件与表单绑定
  10. Vue实例生命周期
  11. Vue插件和模板过滤器
  12. axios请求库
  13. VueRouter路由系统
  14. VueCLI脚手架工具
3. Vue中的组件
  1. 组件的使用
  2. 父子组件传值与组件参数校验
  3. 原生事件绑定与非Props特性
  4. 使用bus进行非父子组件间传值
  5. 插槽的使用
  6. 动态组件
4. Vue中的动画
  1. Vue中的CSS动画原理
  2. Vue中使用animate.css库
  3. Vue中同时使用过渡与动画效果
  4. Vue中使用Velocity.js库
  5. Vue中多组件和列表过度
  6. Vue中动画的封装
5. webpack
  1. 安装与基本配置
  2. 打包JavaScript模块
  3. 打包CSS模块
  4. 打包图片和字体文件模块
  5. 打包less/sass资源模块
  6. ES6转ES5
  7. 打包.vue资源模块
  8. 配置ESLint代码校验工具
  9. 使用clean-webpack-plugin插件清除打包结果目录
  10. 使用HtmlWebpackPlugin打包HTML资源
  11. 处理打包结果的Sourcemaps
  12. 监视打包模式
  13. 使用webpack-dev-server
  14. 模块打包热更新
  15. treeshaking打包优化
  16. 生产环境和开发环境分离打包
  17. 打包优化之CodeSplitting代码分割
  18. 打包优化之模块懒加载
  19. 打包优化之缓存
6. vue进阶
  1. 组件封装进阶
  2. MVVM数据绑定原理
  3. Render方法原理
  4. $nextTick方法的使用
  5. 发布订阅模式
7. 服务端渲染
  1. SSR核心概念
  2. SSR基本用法
  3. 编写通用代码
  4. 路由和代码分割
  5. 构建配置
  6. Nuxt.js
二、vue开发技能
1、组件通讯：
父子组件通讯：父组件向子组件传递数据，使用prop属性，子组件向父组件传递数据；通过子组件this.$emit(event,data)派发事件及数据至父组件；
非父子组件通讯：Global Event Bus，利用全局注册vue实例，再定义全局事件对数据进行操作（少用）；使用vuex公共状态管理进行组件间通讯；
2、插槽：
为灵活实现组件内容定制化，vue引入插槽功能。分为普通插槽和作用于插槽，再vue2.6.0中，对两种插槽进行统一的语法处理，即使用v-slot代替了slot和slot-scope特性，虽已启用但仍未删除。
3、过度动画：
触发条件： v-if或动态组件或v-show或组件根节点
过度类名：v-enter\v-enter-to\v-enter-active、及leave类似
JavaScript钩子：
<transition
@before-enter="beforeEnter
…
/>
4、DOM操作：
尽管vue的初衷有一部分是为了减少开发者操作DOM，但在实际开发中，我们不得不对DOM 进行操作，如css配合原声JS库操作；
5、组件封装：
就近管理：单文件开发是组件化的一大特点，可以将组件中h5、js、css（即展示层、表现层、逻辑层）放入单个页面，静态资源、关联文件都可以放在同级目录中；
复用性：页面的复用、项目的复用、公司的开源组件复用
分层设计：可将单个页面进行拆分
6、keep-alive：
使用场景：保留组件状态，或避免重新渲染组件
生命周期：activated、deactivate激活和失活时触发
7、内存泄漏：
产生原因：未清理的定时器，或未清理的全局注册组件
避免：在组件销毁前的生命周期做事件处理
错误调试：在开发中会经常出现积累异常错误，如计算书香赋值、禁止对prop直接修改，未注册组件等错误
调试工具：可以利用谷歌调试工具、vue-devtools进行调试
8、Vue-router
Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
```
  1、嵌套的路由/视图表
  2、模块化的、基于组件的路由配置
  3、路由参数、查询、通配符
  4、基于 Vue.js 过渡系统的视图过渡效果
  5、细粒度的导航控制
  6、带有自动激活的 CSS class 的链接
  7、HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  8、自定义的滚动条行为
```
9、Vuex
Vuex 是什么？
```
  “Vuex 是一个专为 Vue.js 应用程序开发的++状态管理++模式”。详细可阅读[官方文档](官方文档)，
  状态自管理应用包含以下几个部分：

  1、state，驱动应用的数据源；
  2、view，以声明方式将 state 映射到视图；
  3、actions，响应在 view 上的用户输入导致的状态变化。
```
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
数据流向：

10、Vue - 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

参考：
Vue.js：https://cn.vuejs.org/
Vue Router：https://router.vuejs.org/zh/
Vuex：https://vuex.vuejs.org/zh/

目录CONTENT

Vuejs学习路线总结

评论区