从jQuery到Vue

为什么要从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)