双向绑定的原理

双向绑定是用户通过更新 Model，View会自动更新，相反也是更新View，Model也会自动更新。

双向绑定由三个重要部分构成

• 数据层（Model）：应用的数据及业务逻辑
• 视图层（View）：应用的展示效果，各类UI组件
• 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来

业务逻辑层是实现双向绑定的关键，它负责将数据与视图关联起来，当数据发生变化时，自动更新视图，当视图发生变化时，自动更新数据。

Vue的双向绑定

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

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

• new Vue()首先执行初始化，对data执行响应化处理，这个过程发生Observe中
• 同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中
• 同时定义⼀个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数
• 由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个Watcher
• 将来data中数据⼀旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数

原理

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