前端程序员必知:Vue 3.0的那些事儿

这个时代是不断在发展的,没有人知道未来会是什么样子。尤其是在这科技发展瞬息万变的年代,更是无法去猜测未来会走向何方。

在前端领域也同样不例外。可以说每几个月在前端领域都会有一些新技术涌现和技术变革。在最近十年的时间里,前端更是飞速发展。早已经不是之前人们口中的“抠图仔”,只是写写HTML,CSS和脚本动画那么简单了。https://jq.qq.com/?_wv=1027&k=5LhH9Ed

image

如今的前端早已经系统化,工程化。一方面是移动互联网的兴起,带动移动端浏览器用户需求的飞速增加,另一方面是Angular,React,Vue等框架和Node.js,ES6等新技术的出现和发展,带动了前端技术的飞速提升。

加上前后端分离的开发模式带动前端工程师在开发者中的地位一再提升,因为前后端仅凭接口数据交互,前端工程师可以对接任意语言的后端工程师,也正因此,前端工程师的薪资不论是起薪还是涨幅都是一再水涨船高。

image

但相对的,高薪资就意味着对高能力的要求,要想在面试中获得超高薪资的offer,其自身一定要有雄厚的实力,在平时一定要多学习专业知识,积累专业技能,关注行业最新动态。

image

说到行业动态,在去年九月底,Vue的作者尤雨溪公布了Vue3.0版本的开发计划。一石激起千层浪,消息一出,顿时前端开发者中爆发出一片“学不动了”的哀嚎。

image

然而,那些大佬们是不会因为普通开发者的哀嚎而停下他们创世纪的运动的。而作为普通开发者,我们只能不断学习、接受新的知识,才可能令自己不被这个世界淘汰。

在开发计划中,下图这段话十分吸引我的注意力。Vue3.0版本中将基于Proxy来改造观察者模式。这意味Vue3.0中不再借助于ES5的Object.defineProperty,转而使用最新的Proxy语法实现Vue最根本的数据响应式系统。

image

如何用Proxy来实现对Object.defineProperty的替代?

一、什么是Proxy?

Proxy对象是在ES6中加入的用来自定义对象的各种内建操作,改写JavaScript引擎行为的默认操作的包装器。在使用Proxy定义了对于某些行为的拦截器后,执行相应的操作时,Proxy会拦截JavaScript引擎内部对于相应行为的底层操作并执行自定义的相应行为的陷阱函数。

image

在陷阱函数运行时,引擎的默认操作终止。在陷阱函数中,我们可以执行Reflect对象中与行为相对应的方法来继续执行引擎默认操作,这样一套机制保证了在拦截引擎默认行为时,执行完成自定义行为后,随时可以结束拦截,继续按照引擎默认行为去执行----当然,也可以没有后续操作。

image

二、Object.defineProperty如何实现响应式特性

Object.defineProperty是ES5中的属性,传入一个描述对象即可描述一个对象的属性的特性。

我们用Object.defineProperty来实现对象读写时执行一些特定操作(比如发布属性更新的消息)。

image

在这个例子中,data作为一个消息发布者,在将data所有属性利用Object.defineProperty定义了他们的getter,setter后,每次更改data属性时,都将执行setter中定义的发布通知给watcher的逻辑。

image

三、Proxy如何实现响应式特性

Proxy中存在两个陷阱,一个是get陷阱,另一个是set陷阱。顾名思义,get陷阱拦截读取属性的默认操作,set陷阱拦截设置属性时的默认操作。另一方面,Reflect同样具有对应行为的方法执行默认操作。

同样是对于data对象操作:

image

创建一下它的代理对象:

image

data对象的代理中声明了两个陷阱,分别定义了读取和设置对象属性的行为,我们来尝试运行几句代码:

image

可以看到,proxy可以很顺利地执行自定义的代码,在读取和设置属性时,都执行了自定义的代码,也没有耽误默认行为的执行。

image

Vue3.0的发布尚需时日,以上只是对于Vue应用Proxy实现响应式的方法的猜想。

其实我们关心的重点不必放在Vue应用Proxy实现响应式的方法是否能真的实现。虽然语言的语法和框架功能的具体实现会实时变化,但他们背后蕴含的思想是一致的,只要我们掌握了Vue底层的设计思想,只要学好ES6知识和现版本Vue的应用和原理,相信即使更新了版本也能够很快掌握,应对起来也会游刃有余。

image

很多程序员可能用Vue写业务代码写了很久,api也调用得很顺手,但是问及原理就说不清个所以然来,这也是很多程序员在面试中遇到的问题。Vue和ES6也是目前面试时的重头戏,能够对于有关Vue原理和ES6语法的问题对答如流的同学拿到的offer都是令人称羡的。

那么如何在面试中对于Vue框架的问题逐个击破,向面试官对答如流呢?欢迎大家留言,写下你们的面试经验。

image

技术人成长不能再单打独斗,要学会与人交流,学会将别人的知识为自己所用。如果你依然觉得有些茫然,不如加入我们的学习和交流圈子大家一起讨论如何应对这快速发展的技术。点击了解更多。

陆吧舞 酒要零 呜呜伞 欢迎大家一起来交流讨论:https://jq.qq.com/?_wv=1027&k=5LhH9Ed

image

猜你喜欢

转载自blog.csdn.net/ZIYUSHUO/article/details/88761540