vue系统学习路线总结

vue系统学习路线总结

**vue是构建用户界面的渐进式JavaScript框架，其卓越的双向数据绑定及组件化等设计思想得到了技术人的一致好评！
那么，对于新手来说，要如何才能系统完整的学习到vue框架并应用到实际开发工作中呢？**

一、构建vue工程化工具：

利用脚手架工具构建vue项目无疑是好的办法，有webpack、vue-cli；
1、webpack是一个工程化构建工具，可以模块化打包项目，其中主要包括modules、output、entry、plugins等，通过配置可以实现丰富的构建功能；
2、vue-cli是基于webpack的npm包，并带有合理的默认配置选项；

二、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进行调试