面试几个大工厂时，面试官问你的vue双向数据绑定原理是什么？ 因为有些伙伴不知道是什么，所以在面试官眼里有很大的折扣。 今天小千介绍vue的双向绑定原理。 绝对不要错过。
vue双向绑定
其实关于这个问题我知道得不多。 在vue中采用了mvvm的模式。 集成虚拟机同时关联了视图层和模型层，其中一个变化会影响另一个。 那个回答结束后，面试官会继续提问。 你理解的双向数据绑定背后的原理是什么？ 今天让我们一起探讨vue背后的几种方法。
为了实现双向数据绑定，vue采用了内部发布-订阅模型。 在内部，我们结合了名为Object.defineProperty的ES5新功能，成功拦截vue发送的数据，并动态添加了get和set方法。 当数据发生变化时，将触发相应的set方法。 set方法触发完成后，内部还会触发其他watcher。 数据发生变化时，接下来将比较虚拟dom，运行render，然后完成后续视图更新操作。
来，直接看看图吧
现在，分析原理后，让我们来看看es5这种方法Object.defineProperty有什么用。
让我们运行代码：
可以看到，当输入框的内容发生变化时，p标签中的值也会相应变化。 原因是，当输入框的内容发生变化时，它获取了输入框的值并将其分配给了object.msg属性。 这将执行object的msg属性的set方法，并更改相应的content值。
之后，当我们修改数据时，视图会不会自动更新？
这样，通过调整计时器、经过2s后修改对象的数据、对象的数据发生变化，还可以触发set方法，实现响应的数据变更，视图也成为hello-world的值。 实际上，这就是使用vue的Object.defineProperty进行数据拦截处理的流程。
补充小贴士
vue 2.x中使用的Object.defineProperty对数据的监听实际上是有缺陷的
1、目标属性新增或删除不可拦截；
2、数组元素的添加和删除不能拦截。
那为什么不在2.x的时候解决呢，让我们从两点来考虑：
1 .性能：通过遍历对象的属性进行拦截，但显然属性值如果也是对象，则需要较深的遍历，在这种情况下，最好能够接管整个对象
2 .无法截获数组：属性值改为数组后，数组也成为特殊对象，下标实际上是对象的属性，理论上是可以通过的
由Object.defineProperty处理的笨蛋大神为什么没有采用这种方式？ 推测来源于序列的使用场景。 排列的主要操作场景是遍历。 在每个元素上挂载set和get方法会产生很大的性能消耗，数组下标变化频繁，操作方法多，数组长度发生变化时，会在无法自动检测的状态下手动更新
那么，在vue中如何实现数组的侵占呢，我们改写了7种常用的数组操作。 它们分别是推()、pop ()、shift ()、unshift ()、splice ()、sort ()、reverse )，其中Vue.set。
针对Object.defineProperty的缺点，所有ES6 Proxy都可以完美解决。 唯一的缺点是对IE不友好，因此当vue3检测到使用IE (这样，IE11不支持代理)时，它会自动降级为object.defineproxy
那么在这一步，恭喜你！ 了解了vue2.x双向数据绑定的原理。