前端框架本质之探究——以Vue.js为例

问：我们在使用Vue时，实际上干了什么？

 

答：实际上只干了一件事——new了一个Vue对象。后面的事，都交由这个对象自动去做。就好像按了下开关，机器跑起来了，剩下的事就不用我们再操心了。

 

各位看官先别不服，FEer在基于Vue开发项目时，确实写了很多代码，但本质上，这些代码都是在往这台机器的固定工作程序上添加自定义的行为。譬如说，一个组件被初始化时，其created生命周期钩子一定会被执行，我们可以做的只是填写具体的执行内容，至于这些内容何时被真正执行，是完全由Vue对象控制的，开发者无从插手。

 

为什么这样设计呢？根本原因是前端项目越来越复杂，传统的开发方式显得力不从心。举个例子，用jQuery时，我们自己操作DOM；用Vue时，我们不再亲自操作DOM，而是让Vue去做。我们之所以愿意把DOM管理权让渡给Vue，因为这本就是个脏活累活，随着前端项目规模迅速增长，手动管理DOM的难度、出错率和对性能的影响都在急剧升高，以至于手动管理显得不现实，必须应用一套自动化的管理方式。

 

什么叫自动化的管理方式？

 

DOM本质上是数据的呈现，或者说是数据映射成的视图。当然，严格地说，DOM本身也只是一种描述用户界面的模型，最终的呈现是由浏览器在解析DOM后完成的，但在前端语境下，可以把DOM与视图等同。

 

所以前端程序的核心任务是：达成数据与视图之间的映射。

 

用jQuery时，映射是我们亲自做的，比如说有一个name需要展示出来，我们就创造一个div，把name放在div里，然后把div挂载到DOM树上；但用Vue时，情况不一样了，我们告诉Vue有一个name变量需要被映射，并且（以字符串的形式）告诉Vue映射的模板是个div，但真正创造div结点并将其挂载到DOM树上这一步，是由Vue完成的。

 

看出区别了吗？用上Vue后，我们不再关心DOM结点增/删/改的具体实现，而是专注于创造数据与视图的映射规则（业务逻辑），Vue自会根据这些规则，以最优的策略完成DOM操作，这就是自动化的管理方式。

 

从前文描述可以看出，Vue值得我们了解的重点包括：

1. 如何监听数据变化？因为只有实现了监听数据变化，才能把变化同步到视图上。尤雨溪说基本原理是用Object.defineProperty方法劫持data对象各个属性的getter和setter。

2. DOM更新策略。React和Vue都采用了Virtual DOM技术，以尽量减少DOM操作数量和范围。

 

另外一个值得关注的点是组件的实现，因为现代前端项目体积庞大，必须依赖组件化功能将项目拆分为相对独立的模块，方能有效地组织和复用代码。

 

Vue生态还拥有许多其他工具，它们都是基于Vue所要完成的任务，在某个具体的方面提供支持，如vuex是为了实现跨组件通信、数据共享和状态集中管理，vue-router是为了管理组件和路径的映射关系等。

 

以上提到的三点在Vue.js中的具体实现，且待下回分解。