开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
说点题外话
从vue3更新出来到现在，周围总有人在说Vue3真的好香，不使用无说话权的今天，我就替提大家梳理梳理，vue3到底有哪些值得我们使用它的“高贵”。它到底优雅在哪里？
关于vue3的优雅之处，一篇博文我想是不能写全面的，我也将会用几个篇幅来详细说说vue3的优雅
今天这一篇我们就先从双向绑定的底层开始说起
说正文
如果你是一个正在准备面试，想把问题混个脸熟的看这里！！！
首先我们需要先知道一点：响应式的原理其实就是根据Data更新View
知道了响应式原理之后，问题就好说多了，接着往下看
Vue2的响应式原理底层是基于Object.defineProperty的，但是这个方法只对初始的对象有作用，对后来我们新增的属性无效。
官方也发现这一缺点，使用$set辅助我们完成响应式。
那么，在Vue3的版本中，作者放弃了Vue2使用的Object.defineProperty，而是改用Proxy。
Proxy对比Object.defineProperty好在哪些方面呢？
- proxy和Object.defineProperty的本质区别就是，Object.defineProperty只能对属性进行劫持，所以需要递归遍历，后续添加新的属性后需要手动侦听更新；对于数组来说不能通过数据下标操作数据。
- proxy见名知意翻译为代理，意味着它会代理目标对象，它会针对整个对象而不是对象属性，所以它不需要我们在手动更新后添加的数据。
这两种方式为什么会有这么大的差异呢？那就得从方法说起了
- Proxy内置多达13种方法：apply、has等等，这些是Object.defineProperty不具备的。
那么Vue是如何通过上述两种方法实现响应式的呢？它有4个核心：
- 监听器
Obsever：用来劫持并侦听所有属性，如果属性发生变化，就通知订阅者 - 订阅者
Watcher: 收到属性的变化通知并执行对应的方法，从而更新视图。 - 订阅器
Dep：用来收集订阅者，对监听Observe和订阅者Watcher进行统一管理。 - 解析器
Compile：用来解析template模板
总体来说就是：vue双向数据绑定通过Observer来监听自己的model数据变化，通过compile来解析编译模板，最终通过watcher搭起observer和compile之间的通信，达到数据变化视图就更新。
说再见
这一篇我们先简略的说一下vue3比vue2的优雅之处，下一篇我会详细说说这两个底层原理具体有什么区别并且是怎么实现我们的数据响应式。
难忘今宵
咬舌自尽是怎么回事？
咬舌自尽的办法一般是用牙齿从舌根处把舌头咬断，这当然是很疼的，但却不会立即死去。另外，存心咬舌自尽的人一般都是具有较强的意志力，忍受疼痛的能力也很强。
