如果说2006年横空出世的jQuery是一把前端开发者之于浏览器与原生JavaScript操作的神级利器，那么如今在ECMA6时代被广泛使用的Vue.js，则更像是为前端开发者打开了一道通往全新世界的大门，在此之后，别有洞天，天地一宽。

一直以来，对于服务端的开发者来说，即便有新贵如Python般后来居上，又或者如go、PHP、ruby等语言在各自领域中发光发热，C和Java却始终交替占据着属于开发语言的头把交椅，经典咏流传，而对于前端技术来说，全然是另一片光景，无论是PC端开发的需求，又或者APP开发混编技术大势所趋，前端框架技术的更新迭代之快，称得上狂飙突进，一日千里。想当年，初涉前端时，还醉心于jQuery对DOM简便精准的操作，对于AJAX技术的高效支持，以及让用户能从原生JavaScript略显繁琐的书写模式和不可调和痛心疾首的浏览器兼容性问题中脱离出来，那么当Vue.js出现在开发者面前时，几乎会震惊于它另起炉灶，重开天地的魄力与其背后近乎天才般的精妙设想。更值得自豪的是，它的出来完全来自于我们中国的工程师。

Vue为什么那么牛？

了解Vue.js之前，首先要明白的一个基本知识，它是一个“框架”，而非“库”。在使用jQuery时，开发者通常的操作是调用它，并使用内置的函数来实现自己想要的效果，但在Vue.js使用过程中，开发者需要把自己的代码放入到框架内，让框架执行代码来完成操作，这种代码控制权的转变也意味着前端开发思路的彻底转变。

随着MVC模式的不断深入，前后端分离也成为了如今众多IT公司主流开发模式，后端专注于写业务逻辑、API，前端则致力于页面渲染，前后端与人机之间的数据交互。Vue框架由此应运而生，并很好的完成了这一功能。

Vue框架使用了一种MVVM的设计模式，其中Model层代表数据模型，决定了页面显示中具体业务数据的信息，View代表了UI显示，它负责数据如何在页面中展示，ViewModel则是连通前面两者之间的桥梁。在整体结构中，View和Model相互之间并不存在直接联系的关系，而是通过ViewModel进行双向交互。当Model层中数据发生变化，就会及时反应到view上，相反view层的变化也会同步到model中。巧妙的地方在于，这样双向数据绑定，全部由框架自动处理完成，无需任何人为干涉，开发者只需要关注业务本身逻辑即可。

至于如何实现这种效果，设计者采用了数据劫持结合发布者-订阅者模式的方式，通过ProxyAPI来劫持各个属性的setter，getter。生成页面时，首先，实现一个数据监听器observer，当数据发生变化时推送给客户端，再实现一个指令解析器compile，对每个元素节点进行扫描解析，最后用一个Watcher来完成两者的数据交互。如果稍微了解下用原生JavaScript，或者jQuery实现这一功能所需要花费的代码量，就会明白这个框架何以让前端开发人员有种“鸟枪换炮”的畅快感的。

早前时期，JavaScript的开发很大程度上受制于浏览器本身的性能，简单地说是对于DOM的应用操作。众所周知，决定一张WEB页面呈现的内容，是由这张页面DOM树下各个数据，和CSS渲染的效果组合而成。当JavaScript需要操控数据时，其实就是对DOM结构的操作，发生的任何一个变化也是对整个DOM的变化。Vue框架天才之处就在当页面生成时也顺带生成了一个虚拟的DOM，它仅仅是一个object对象，和真实DOM一一照应。在以前，如果一次操作涉及更新10个DOM点的操作，浏览器就会对真实的DOM进行10次修改，而如今，Vue框架会把十次更改预先在虚拟DOM中执行操作，然后统一一次更改。再则，设计者通过一种叫diff的算法，让虚拟DOM和真实DOM进行比较，找寻到区别点进行局部修改，仅此两项变革，就大大提升了前端页面的运行速度，也足够让前端开发摆脱浏览器性能带来的束缚。

为什么我们要了解技术内幕？

事实上，本书《Vue.js技术内幕》并不是一本非常适合刚入IT圈新人们的技术读物，作者没有把主要精力放置在如何配置环境，如何下载源代码，如何导入框架等基础问题上，就如同本书内容提要中所说的那样：“本书面向有 Vue.js、React 或者 Angular 等框架使用经验的，对源码设计感兴趣，渴望在技术方向进一步成长的开发者。”

所以在阅读本书时，全然不会有如同“从入门到进阶”，输出“hello world”之后的爽快感，更多的可能是繁琐的代码注释，复杂的解读分析，即便有流程图也会觉得似是而非，云里雾里。

如果你并没有对眼前的一切有所排斥，还能够咬紧牙关坚持看下去，那么恭喜你，你将看到的正是关于Vue框架的精髓所在。只有当读者已经对Vue的基本工作模式有所了解，并凭此能够完成一些简单的项目之后，再去阅读本书时，才会有种豁然开朗的通透感。如果在此之前，读者所能做的仅仅是框架基本工作流程的开发应用，那么本书所要做的就是告诉读者们，Vue框架之所以可以完成此功能，其核心原理是什么？设计思想又是如何？

比如Vue框架使用了一种“组件”的关键概念，同时也是它的核心思想之一。从本质上，组件不过是用以描述DOM的JavaScript对象，当组件需要渲染时，会执行render函数生成vnode节点，并在patch阶段变成真实的DOM，挂载到WEB页面上。

另一头，应用程度入口的createApp函数也会通过组件节点递归的方式来捕捉到所有节点，并将其逐一渲染。

这样做的另一大好处在于，视图的更新粒度是组件级别，当数据发现变更时，仅仅用patch来递归遍历子节点，即可找寻到对应的区别，来完成整个树的更新。

再比如，Vue框架使用了数据驱动的方式来实现响应式，通过数据劫持的方式，当获知数据发生修改时就派发通知，启用渲染函数来重新生成组件。还解释了源码如何通过watch侦听器来观测数据的实时变化，之后执行相应的逻辑操作。

并且本书还详细解读了Vue3.0后引入的四个内置组件实现过程，其中包括，可以将数据推送到其他节点的Teleport组件，可以用于缓存组件，使其不至于被销毁的KeepAlive组件，让页面元素在变化时拥有过渡动画效果的Transition组件，以及让一整个列表子元素都拥有过渡动画效果的TransitionGroup组件。

最后还提及了vuex的实现原理，这种模式很好地解决了多个组件相互共享状态时遇到的复杂而又繁琐的操作。

作为本书的作者黄轶老师，多年来致力于Vue框架的教学和研究，推进前后端分离架构方案，不仅负责 Zoom 自研组件库 ZoomUI 的开发，还在慕课网上教授关于Vue的各项课程。而如今他将对于Vue框架的研究成果集结于本书之中，不仅不厌其烦的注释解读代码，甚至还贴心的在每章总结处以流程图的方式对功能加以说明，确实是众多开发者不可多得的学习资料。总得来说，本书不是“一读就会，拿来就用”的技术书籍，需要读者跟随着作者，反复阅读，时时翻阅，不断研磨，深入研究，从最底层的代码实现去重新认识“似曾相识”的Vue框架，并从中找寻到全新的认知。

叔本华在他的《作为意志和表象的世界》中写道：“不管现象如何，真正的智慧是能够针对任何一个个别事物进行彻底研究，并能够完全认识和理解这一事物的真正的、原有的本质。”

探寻底层，寻找本质，看清事物的真实面目，然后，融会贯通。

祝各位，开卷有益！