关于Vue 3.0前端开发者必须知道的不仅仅是Proxy...

朱雀 2022-01-20 08:39 222阅读 0赞

前端技术在最近十年的时间里飞速发展，一方面是移动互联网的兴起，带动移动端浏览器用户需求的飞速
            
            增加，另一方面是Angular,React,Vue等框架和Node.js，ES6等新技术的出现和发展，带动了前端技术的飞速
            
            提升。
            
                前端早已经不是之前人们口中的“抠图仔”，只是写写简单的HTML，CSS和脚本动画。如今的前端早已经系
            
            统化，工程化，前后端分离的开发模式带动前端工程师在开发者中的地位一再提升，因为前后端仅凭接口
            
            数据交互，前端工程师可以对接任意语言的后端工程师，也正因此，前端工程师的薪资不论是起薪还是涨
            
            幅都是一再水涨船高。
            
                高薪资就意味着对高能力的要求，要想在面试中获得超高薪资的offer，一定要有雄厚的实力，在平时一定
           
           要多学习专业知识，积累专业技能，关注行业最新动态。
                
                说到行业动态，在去年九月底，Vue的作者尤雨溪公布了Vue3.0版本的开发计划。一石激起千层浪，消息
            
            一出，顿时前端开发者中爆发出一片“学不动了”的哀嚎。
            
                然而，大神是不会因为普通开发者的哀嚎而停下他们创世纪的运动的。作为普通开发者，我们只能不断学
            
            习、接受新的知识。
             
                在开发计划中，下图这段话十分吸引我的注意力。Vue3.0版本中将基于Proxy来改造观察者模式。这意味V
            
            ue3.0中不再借助于ES5的Object.defineProperty，转而使用最新的Proxy语法实现Vue最根本的数据响应
            
            式系统。
             
               如何用Proxy来实现对Object.defineProperty的替代？因为Vue3.0尚未发布，我来讲讲一个简单实现。
            
                什么是Proxy？
            
                Proxy对象是在ES6中加入的用来自定义对象的各种内建操作，改写JavaScript引擎行为的默认操作的包装
            
            器。在使用Proxy定义了对于某些行为的拦截器后，执行相应的操作时，Proxy会拦截JavaScript引擎内部
            
            对于相应行为的底层操作并执行自定义的相应行为的陷阱函数。
            
                在陷阱函数运行时，引擎的默认操作终止。在陷阱函数中，我们可以执行Reflect对象中与行为相对应的
            
            方法来继续执行引擎默认操作，这样一套机制保证了在拦截引擎默认行为时，执行完成自定义行为后，随
            
            时可以结束拦截，继续按照引擎默认行为去执行----当然，也可以没有后续操作。
            
            Object.defineProperty
            
                如何实现响应式特性
            
            Object.defineProperty是ES5中的属性，传入一个描述对象即可描述一个对象的属性的特性。
           
            我们用Object.defineProperty来实现对象读写时执行一些特定操作（比如发布属性更新的消息）。
            
                在这个例子中，data作为一个消息发布者，在将data所有属性利用Object.defineProperty定义了他们的g
            
            etter,setter后，每次更改data属性时，都将执行setter中定义的发布通知给watcher的逻辑。
            
            Proxy如何实现响应式特性
            
            Proxy中存在两个陷阱，一个是get陷阱，另一个是set陷阱。顾名思义，get陷阱拦截读取属性的默认操作
            
            ，set陷阱拦截设置属性时的默认操作。另一方面，Reflect同样具有对应行为的方法执行默认操作。
            
            同样是对于data对象操作：
            
                 创建一下它的代理对象：
            data对象的代理中声明了两个陷阱，分别定义了读取和设置对象属性的行为，我们来尝试运行几句代码：
            可以看到，proxy可以很顺利地执行自定义的代码，在读取和设置属性时，都执行了自定义的代码，也没
            
                有耽误默认行为的执行。
            
                 Vue3.0的发布尚需时日，本文是笔者对于Vue应用Proxy实现响应式的方法的猜想。最终具体的实现并不重
            
            要，我们只要学好ES6知识和现版本Vue的应用和原理，相信即使更新了版本也能够很快掌握。Vue和ES6也
            
            是目前面试时的重头戏，能够对于有关Vue原理和ES6语法的问题对答如流的同学拿到的offer都是令人称
            
            羡的。
            
                虽然语言的语法和框架功能的具体实现会实时变化，他们背后蕴含的思想是一致的，只要我们掌握了Vue
            
            底层的设计思想，相信同学们都会达到游刃有余的地步。
            
            可能用Vue写业务代码写了很久，api也调用得很顺手，但是问及原理就说不清个所以然来，这也是很多同
            
            学在面试中遇到的问题。那么如何在面试中对于Vue框架的问题逐个击破，向面试官对答如流呢？
            
            技术人成长不能再单打独斗，要学会与人交流，学会将别人的知识为自己所用。如果你依然觉得有些茫然
            
            ，不如跟有多年前端开发经验的资深工程师聊一聊。
            
            
            如果你喜欢请给我点个赞吧！我是你们的好朋友Haidy哦！爱你们
    复制代码