我们如何从底层来重新认识Vue

2022-11-24 0 767

如果说2006年陨落的jQuery是一把后端合作开发人员奥尔奈应用程序与原生植物JavaScript操作方式的迪拉泽法宝,所以现如今在ECMA6时代被广泛采用的Vue.js,则更像是为后端合作开发人员打开了一道通往全中国地产的大门,在此之前,缥缈,四海一宽。

一直以来,对服务器端的合作开发人员而言,即便有三剑客如Python般异军突起,又或是如go、PHP、ruby等词汇在各自领域中萤光发热,C和Java却始终交替占据着属于合作开发词汇的独霸,经典咏流传,而对后端控制技术而言,完全是另一片往昔,无论是PC端合作开发的需求,又或是APP合作开发T2390控制技术必然趋势,后端架构控制技术的更新插值之快,算是高歌猛进侧击,瑞维尼。LX1,初入后端时,还醉心jQuery对DOM方便快捷精确的操作方式,对AJAX控制技术的高效支持,以及让用户能从原生植物JavaScript稍嫌繁杂的手写商业模式和不可取舍痛心的应用程序兼容问题中脱离出,所以当Vue.js出现在开发者面前时,几乎会震惊于它莱盖,重启四海的气魄与其背后几近天才少年般的绝妙设想。更值得骄傲的是,它的出完全来自于我们中国的技师。

我们如何从底层来重新认识Vue

Vue为什么所以牛?

了解Vue.js之前,首先要明白的一个基本技能,它是一个“架构”,而非“库”。在采用jQuery时,合作开发人员通常的操作方式是初始化它,并采用内建的函数来实现自己想要的效果,但在Vue.js采用过程中,合作开发人员须要把自己的标识符放进到架构内,让架构执行标识符来顺利完成操作方式,这种标识符控股权的变革也意味着后端合作开发思路的彻底变革。

随着MVC商业模式的近些年,其间端分离也成为了现如今众多IT公司主流合作开发商业模式,后端著眼于写销售业务方法论、API,后端则致力于网页图形,其间端与人工智慧之间的统计数据可视化。Vue架构由此不断涌现,并很好的顺利完成了这一功能。

Vue架构采用了一种MVVM的设计商业模式,其中Model层代表者统计数据源,决定了网页表明中具体销售业务统计数据的信息,View代表者了UI表明,它负责统计数据怎样在网页中展示,ViewModel则是相连接前面二者之间的桥梁。在整体结构中,View和Model彼此之间并不存在连系的关系,而是通过ViewModel进行单向可视化。当Model层中统计数据发生变化,就会及时反应到view上,相反view层的变化也会同步到model中。别出心裁的地方在于,这样单向统计数据存取,全部由架构自动处理顺利完成,无须任何人为干涉,合作开发人员只须要关注销售业务本身方法论即可。

我们如何从底层来重新认识Vue

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

我们如何从底层来重新认识Vue

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

我们如何从底层来重新认识Vue

为什么我们要了解控制技术内幕?

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

我们如何从底层来重新认识Vue

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

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

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

我们如何从底层来重新认识Vue

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

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

再比如,Vue架构采用了统计数据驱动的方式来实现响应式,通过统计数据劫持的方式,当获知统计数据发生修改时就派发通知,启用图形函数来重新生成组件。还解释了源码怎样通过watch侦听器来观测统计数据的实时变化,之后执行相应的方法论操作方式。

我们如何从底层来重新认识Vue

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

我们如何从底层来重新认识Vue

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

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

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

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

祝各位,开卷有益!

我们如何从底层来重新认识Vue

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务