应届生面试--vue数据双向绑定的原理

前段时间疫情在家的时候，视频面试，面试官问了我一个问题“vue数据双向绑定的原理”，我毫不犹豫地回答到v-model，至于原理我没答出来，自然，这个offter也没能拿到，今天，就来讨论一下vue数据双向绑定的原理到底是什么？

在网上百度这个之后，出来很多篇文章，这里我就谈一下自己理解的意思，若有问题，欢迎各位大佬指正前端小白~

Vue.js采用的是数据劫持结合发布者——订阅者模式的方式（也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变），通过Object.defineProperty（）这个方法重新定义了对象获取属性值（get）和设置属性值（set）的操作来实现的。

作为我看到Object.defineProperty()这个方法这里就已经蒙了，因为没有用过，后来通过查询官网稍微理解一下，这里做一个简单的说明：

Object.defineProperty

这个方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
Tips：应当直接在object构造器上调用此方法，而不是任意一个Object类型的实例上调用。
语法：Object.defineProperty(obj,prop,descriptor)
obj:要定义属性的对象
prop:要定义或修改的属性的名称或Symbol
descriptor:要定义或修改的属性描述符
示例代码如下：

const object1 = {};
Object.defineProperty(object1,'property1'), {
	value:42,
	writable:false
};
object1.property1 = 77;
console.log(object1.property1)
// 输出：42

简单的来说，当我们使用这个方法来定义一个值，当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法。