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

时间:2023-12-05 08:33:44
问:我们在使用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中的具体实现,且待下回分解。