【vue面试题——vue的响应式】

面试中经常会被问到vue的响应式原理。你心里先想好答案再往下看，看看你是否真正理解了。

一、响应式原理

• vue2的响应式原理和双向绑定的原理其实大致相近，就是通过数据劫持结合发布者-订阅者模式的方式来实现的。怎么做到数据劫持？通过**Object.defineProperty()**方法设置set和get函数。你向面试官说完这个面试官可能会让你解释一下发布者-订阅者模式以及知不知道其它设计模式。我会在文章末尾给出常用前端设计模式~~

• vue3的响应式原理是通过 Proxy 实现的。在vue2的基础上，Proxy 还完善了 definePropery 的缺陷，如监听属性的删除。Proxy 是针对对象来监听，而不是针对某个具体属性，所以不仅可以代理定义时不存在的属性，还可以代理更丰富的数据结构，比如 Map、Set …，还能通过 deleteProperty 实现对删除操作的代理。

二、拓展

常见设计模式

设计模式分为三类：

• 行为型
• 结构型
• 创建型
  行为型常见的有发布订阅模式，也就是上文提到的；结构型主要有装饰器模式、代理模式；创建型主要有简单工厂模式，单例模式。

设计模式看着不好理解，但是我们只要带入生活例子就很好记忆啦。这些模式一搜就有，我大概给大家举例子解释一下：
发布订阅模式也叫观察者模式，类似于我和同学们都去买手办，但是老板说现在没货了，让我们都留下联系方式，等到货了通知我们所有人。在这里老板是发布者，我和其它人都是订阅者。
装饰器模式，就是在原本的东西上套上装饰器，在保留原理功能的情况下新增功能。比如我有一个扫地机器人只能扫地，我在外面套上一个音乐播放器。这样它就有扫地和放音乐两个功能了。
代理模式就是相当于我们想联系明星只能先联系明星的经纪人。
单例模式大家应该比较熟悉，就是只有一个实例，不能让用户一直new实例，而是要把我们这个实例return出去使用。
下篇文章继续更新面试题~