前端面试准备（框架原理）--- 双向绑定的实现

简单介绍
我的理解，所谓的双向绑定，其实就是将Model和View绑定在一起，任何一方改变的同时，改变另外一方。
在流行框架中，react是单向绑定（只支持Model改变=>View改变），要实现双向绑定得加value和onChange事件从而实现（View改变=>调起事件=>改变Model）。
而vue是双向绑定的，因为它事先已经帮我们绑定好了事件。
什么是Model
我理解为Model就是一个JS对象，用来存储页面中的数据。
什么是View
我理解是页面中所显示的DOM对象的集合。

怎么实现双向绑定呢？

1. Object.defineProperty()
   点击查看实现效果
   Model => View 实现的原理：
   当Model改变时，得到事件响应（数据劫持），获取到Dom节点，我们就可以通过Dom.value来改变View。而Object.defineProperty主要帮我们来获得这个过程的事件响应，或者常说的数据劫持，可以劫持到改变后的新值。
   View => Model 实现原理：
   当View改变时，调起onKeyup之类的事件，然后改变响应的Model，这个其实是很简单的。
2. Proxy() – vue3中启用了该方式
   点击查看实现效果
   实现原理与上面基本相似，但是为什么vue3中会使用它呢？这个后面会解释。

Object.defineProperty()
这个建议去看一下红宝书的介绍可以帮助快速理解。或者点击MND

主要使用到了它的访问器属性：get和set

1. get
   当获取对象属性