为什么要从jQuery转到Vue？
原因1:
微服务化后, 很多站点都开始转前后端分离. 此时单页面应用的需要越来越多.
有些复杂的单页面应用, 交互复杂性很高, 代码量成倍增长
当然, 我们还是可以用jQuery来开发单页面应用, 其一般性过程是:
- 渲染视图
- 获取数据
- 绑定事件函数
- 更新视图
- 设计路由
- 状态机管理(高级)
jQuery可以通过使用Vuex/Mobx/Redux做状态管理, 根据用户的交互动作触发不同的action, 更新状态.
既然如此, 那为何还要转到Vue技术栈呢?
要想完成上面那些, 不亚于重新开发一套框架, 制定一套规范, 其工作量和难度可想而知. 从项目交付目标和代码维护(编码规范的学习和遵循也是很大的成本)的角度来看, 不推荐这么做.
原因2:
项目组要求统一技术栈
项目组要求统一技术栈肯定是好处的, 比如:
- 降低团队学习成本；
- 完善技术生态，技术方案提取和复用，提高开发效率。
Vue技术栈中很多都是经过实战考验的, 官方推荐工具链:
- 路由： vue-router
- 状态管理： Vuex
- 构建工具脚手架： vue-cli
- 开发者工具： vue-devtools
- IDE支持： vscode + Vetur
- 静态检查： Eslint + eslint-plugin-vue
- 单元测试： Jest + vue-jest + vue-test-utils
- 文档/静态站生成： VuePress
使用Vue可以借助一些工具来规范代码写法, 使用jQuery代码的写法可能有多种变化, 难以规范代码写法.
原因3:
追随前沿潮流
技多不压身, 多学一门技术也不是坏事!
相比较于其他框架, 如React, Angular, Vue的学习曲线还是比较平滑的.
为什么选择Vue？
- 相比React, Angular等, Vue的确更容易入手. 如果有HTML/CSS/JavaScript基础, 学习几天或一周就可以开始做项目了.
- 另一个原因, 应该是Vue有良好的中文文档支持吧, 应该国人使用Vue的会很多.
jQuery与Vue有哪些不同？
1. jQuery是事件驱动, Vue是数据驱动
2. 使用jQuery会经常操作DOM, 而Vue的开发中应该避免操作DOM.
Vue最终呈现的DOM, 都是由数据驱动, 动态生成virtual DOM, 并进行diff以尽量最小化的资源消耗更新DOM.
3. Vue强调组件的概念, jQuery则无
- Vue强调组件的概念, 把相关逻辑处理的html/css/js部分封装起来, 复用很方便, 开发效率成倍提高.
- jQuery虽然没有组件的概念, 但是也可以借助第三方插件再约定一些规范, 同样也可以完成类似于Vue组件的功能, 但并非原生支持.
4.jQuery是非响应式的, 而Vue是响应式的，这也是其的强大之处
- 虽然jQuery是非响应式的, 但也有一些基于jQuery而开发的响应式框架, 如: backbonejs
- Vue虽然是响应式的, 但在低版本的浏览器中兼容性没有jQuery好, 如: IE8及以下
5. jQuery适合于交互简单的页面，Vue适合于交互复杂的页面
- jQuery强调事件驱动, 行为和结果一对一关联. 如果单页应用交互稍复杂, 事件与元素的绑定关系将会复杂如蜘蛛网状.
- Vue强调数据驱动, 只要数据发生变化, 就会呈现相应的视图, 非常适合单页应用.
jQuery转Vue常犯错误
1. 操作DOM
jQuery程序员开发时, 经常写的代码可能是操作DOM, 或是绑定事件等.
但在Vue中进行开发时, 应禁止操作DOM, 特定是更新DOM.
大家应该转变思维, 通过数据驱动DOM的变化.
2. 给DOM元素设置id属性, 方便选择
在使用jQuery开发时, 这种情况也是要避免的, id在一个页面中应该只存在一份. 但在Vue中开发时, 更多强调的是组件复用, 如果一个页面同时存在两个相同的组件, 也将意味着有两个相同的id属性值的元素, 那代码的准确性就难以预知了.
在Vue中进行开发时, 如果想要组件内特定的元素, 应该给元素设置ref属性值, 然后在组件内通过this.$refs.refValue来取得Element元素对象.
3. 迷信Vue的局部样式
Vue组件中可以写局部样式, 但它也不是万能的.
实现的原理也很简单, 无非是复用CSS元素选择器权重来进行控制.
4. 滥用Vuex
何时应该使用Vuex呢? 其实也没有固定的标准, 但有一条是可以明确的, 当你的项目很复杂, 到了不得不用Vuex来解决时, 就应该考虑用Vuex了.
大部分场景下, 使用组件的data属性就可以了.
5. 滥用EventBus
EventBusg事件总线消息订阅发布通信机制, 和jQuery的事件绑定很相似. 原先写jQuery的同学可能会用起来很顺手. 但是, 不推荐! 大家应该还是尽量用数据驱动的思维来编码. 除非在一些特殊的场景, 不得不用.
6. Vue工程中使用jQuery
在Vue工程中能不能用jQuery? 关于此的讨论也是众说绘云, 但有一点请大家注意: 如果一定要使用jQuery, 禁止操作DOM.
个人建议, 在Vue工程中, 应避免使用jQuery, 除非万不得已. 因为在Vue中使用了jQuery之后, 就可能会有很多原先使用jQuery的同学, 在Vue的外衣下, 继续用jQuery开心的编码, 埋雷! 不利于大家数据驱动的编码思维的养成.
7. 没有及时清理第三方插件生成的实例或事件绑定清除
1. 第三方插件生成的实例没有及时销毁
场景1: 在Vue组件中会使用到echart, 但并没有在Vue 的生命周期钩子函数beforeDestory / Destoryed中及时销毁生成的echart实例.
2. 绑定的window没有及时清除
场景1: 组件中有时可能需要对window的resize等事件做监听处理, 但在组件销毁时并没有清理, 这样会导致监听的事件在组件销毁后还会被触发, 并可能运行出错.
场景2: 利用rx.js实现事件订阅/发布, 但在组件销毁时没有销毁listener. 由此, 监听的事件处理函数还是继续执行, 并可能运行出错, 且问题难以排查.
场景3: 使用setTimeout&setInterval定时请求数据等, 但在组件销毁时没有做处理, 也会导致定时器会继续执行, 并可能运行出错, 且问题难以排查.
8. watch/computed
二者都会监听数据的变化, 但是有所不同:
- computed, 惰性触发, 即数据有变化时才会触发变化. computed只能读取一个多个变化的数据组合, 不可改变数据
- watch, 实时触发, 不论数据有无变化, 都会触发
watch内的处理. 性能损耗会比较大, 就尽量避免使用watch
9. 更多(今天先更新到这, 休息休息....)
新手学习Vue
- 良好的HTML/CSS/JavaScript基础知识是必要的前提条件
- Vue官网（中文） 按指南学习一遍
- 建议按部就班从最简单ES5写法开始学习， 不建议直接上来就用vue/cli， 特别是没有node或webpack基础的同学
- 选择一个小场景或业务， 使用Vue实现， 然后再逐步增加难度，再循环看Vue官网。
- 到此， 你应该可以完成一些简单的业务逻辑了。
更进一步学习： 参考文章：[Vue 2.0建议学习顺序] (https://www.jianshu.com/p/61c57d40d3ec)