我来说说 Vue面试知识点和 Vue3.0

待我称王封你为后i 2022-03-08 03:54 198阅读 0赞

昨天文章刚说了React的重要性和为何流行，今天北妈带你回归Vue，云里雾里、懵不懵逼都在你自己，反正无论如何，这一年我会疯狂的让大家学习，催促自己和你们一起学习，并且一起参与其中。 入正题

# **一** #

# 昨天我刚说了React的重要性和知识点，今天北妈带你回归Vue，云里雾里、懵不懵逼、学不学的动都在你自己，反正无论如何，这一年我会疯狂的让大家学习，催促自己和你们一起学习，并且一起参与其中。  #

#     #

# 入正题，今天北妈带你说说vue里的一些技术点，好让你应付面试和了解。 #

**Vue和ES6也是目前面试时的重头戏，能够对于有关Vue原理和ES6语法的问题对答如流的同学拿到的offer都是令人称羡的。**

虽然语言的语法和框架功能的具体实现会实时变化，他们背后蕴含的思想是一致的，只要我们掌握了Vue底层的设计思想，相信同学们都会达到游刃有余的地步。

可能用Vue写业务代码写了很久，api也调用得很顺手，但是问及原理就说不清个所以然来，这也是很多同学在面试中遇到的问题。

**那么如何在面试中对于Vue框架的问题逐个击破，向面试官对答如流呢？**

# 前端技术在最近十年的时间里飞速发展，一方面是移动互联网的兴起，带动移动端浏览器用户需求的飞速增加，另一方面是Angular,React,Vue等框架和Node.js，ES6等新技术的出现和发展，带动了前端技术的飞速提升。    #

前端早已经不是之前人们口中的“抠图仔”，只是写写简单的HTML，CSS和脚本动画。如今的前端早已经系统化，工程化，前后端分离的开发模式带动前端工程师在开发者中的地位一再提升。

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

![640?wx\_fmt=png][640_wx_fmt_png]

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

![640?wx\_fmt=png][640_wx_fmt_png 1]

然而，大神是不会因为普通开发者的哀嚎而停下他们创世纪的运动的。作为普通开发者，我们只能不断学习、接受新的知识。

# **二** #

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

![640?wx\_fmt=png][640_wx_fmt_png 2]

**如何用Proxy来实现对Object.defineProperty的替代？因为Vue3.0尚未发布，我来讲讲一个简单实现。**

##     ##

## **什么是Proxy？** ##

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

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

## **Object.defineProperty** ##

## **如何实现响应式特性** ##

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

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

![640?wx\_fmt=png][640_wx_fmt_png 3]

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

## **Proxy如何实现响应式特性** ##

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

同样是对于data对象操作：

![640?wx\_fmt=png][640_wx_fmt_png 4]

创建一下它的代理对象：

![640?wx\_fmt=png][640_wx_fmt_png 5]

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

![640?wx\_fmt=png][640_wx_fmt_png 6]

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

# **三** #

Vue3.0的发布尚需时日，本文是我对于Vue应用Proxy实现响应式的方法的猜想。最终具体的实现并不重要，我们只要学好ES6知识和现版本Vue的应用和原理，相信即使更新了版本也能够很快掌握。

福利来了

3月11日-3月17日，网易云课堂将会开展为期一周的前端进阶**免费系列直播课**。

**网易资深工程师带你突破前端开发技术瓶颈，****深度剖析JavaScript、前端主流框架Vue及React，横跨移动端和后端开发技术****，**每天2小时，密集输入前端开发相关知识及经验，帮你快速实现技术和职业成长上的突破。

***福利1  免费直播课程***

**《****网易云课堂前端****进阶免费系列直播课》**

适听人群：前端初、中级开发工程师

**3.11-3.17  连续7天每晚8点准时直播**

▼

> **3月11日：**JS进阶基础面试策略-曾经虐过我的面试官你还好吗
> 
> **3月12日：**JavaScript必备系列-Bind关键字解析与实现
> 
> **3月13日：**如何使用fetch请求数据
> 
> **3月14日：**数据采集手写表单校验框架
> 
> **3月15日：**快速推进vue项目要点--axios请求改造封装**  **
> 
> **3月16日：**从0到1封装和发布我们自己的vue移动端支付插件
> 
> **3月17日：**前端资深技术专家面试Vue专场 - 别再让面试官虐的你面红耳赤

***福利2  前端开发资料包***

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

想要参与前端进阶免费系列直播课

获取前端开发工程师资料包

**扫描下方二维码，**

添加网易云课堂前端课程 **助教小姐姐**

![640?wx\_fmt=png][640_wx_fmt_png 7]

免费课程，名额有限，先到先得~~![2\_06.png][2_06.png]

**每日金句：“失败的定义：什么都要做，什么都在做，却从未做完过，也未做好过。”**  
PS：平时不开赞赏，月底统一收租，但不耽误你点 \[好看\]。

[640_wx_fmt_png]: /images/20220308/89e6005b31e947c593ee90bee97c3514.png
[640_wx_fmt_png 1]: /images/20220308/bb888712e7214e4ba67399b8aa81beb1.png
[640_wx_fmt_png 2]: /images/20220308/0eda887ed08c4bd9960e9b0933a0c280.png
[640_wx_fmt_png 3]: /images/20220308/129bdf59944e4238af20c4a0f7918979.png
[640_wx_fmt_png 4]: /images/20220308/2175eb72b396426cb2513893e572b766.png
[640_wx_fmt_png 5]: /images/20220308/e576d9f2107a47a7ad855acd5e8d49bd.png
[640_wx_fmt_png 6]: /images/20220308/e5a9037070544152b84b67d3a1641a6d.png
[640_wx_fmt_jpeg]: /images/20220308/1c1a00e6cbac4517a73833fc6f84e237.png
[640_wx_fmt_png 7]: /images/20220308/9061876d4cf44bd181645922f43eca20.png
[2_06.png]: /images/20220308/1ef00eabc5b444a0971e50e933f1650f.png