Vue的双向数据绑定原理

什么是MVVM ，MVC 模型

MVC

M: model数据模型， V:view视图模型，C: controller控制器

是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。

它的好处是: 保证了模块的智能单一性，方便程序的开发、维护、耦合度低.

mvm

M: model数据模型， V:view视图模型，VM: viewModel视图数据模型

它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据

Vue双向绑定的原理

Vue 数据双向绑定原理是通过数据劫持 + 发布者-订阅者模式 的方式来实现的，首先是通过 ES5 提供的obiect.defineProperty() 方法来劫持(监听) 各属性的 getter、setter，并在当监听的属性发生变动时通知订阅者，是否需要更新，若更新就会执行对应的更新函数。

什么是数据劫持

数据劫持比较好理解，通常我们利用 object.defineProperty 劫持对象的访问器，在属性值发生变化时我们可以获取变化，从而进行进一步操作。

发布者模式/订阅者模式

在软件架构中，发布订阅是一种消息范式，消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(称为订阅者)。而是将发布的消息分为不同的类别，无需了解哪些订阅者(如果有的话)可能存在。同样的订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者(如果有的话)存在。

这里很明显了，区别就在于，不同于观察者和被观察者，发布者和订阅者是互相不知道对方的存在的，发布者只需要把消息发送到订阅器里面，订阅者只管接受自己需要订阅的内容

Object.defineProperty

Object.defineProperty( obi, prop, descriptor )

三个参数:

obi 要定义的对象

prop 要定义或修改的属性名称或 symbol

descriptor 要定义或修改的属性描述答

属性描述符

get

属性的 getter 函数，如果没有 getter，则为 undefined 。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象(由于继承关系，这里的 this 并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。

默认为[ undefined ]

set

属性的 setter 函数，如果没有 setter，则为 undefined 。当属性值被修改时，会调用此函数。该方法接受一个参数(也就是被赋予的新值)，会传入赋值时的 this 对象。默认为[ undefined ]