乐趣区

关于javascript:Vue面试题之vue实现MVVM数据绑定

MVVM

什么是 MVVM?

MVVM是 Model-View-ViewModel, 是把一个零碎分为了模型(model)、视图(view)和 view-model 三个局部。vue 是一个典型的 MVVM 思维,数据驱动视图
艰深一点就是view 层不间接和 model 层通信,他们只能通过 view-model 层通信。

vue 中 MVVM 的了解

vue 是一个 MVVM 渐进式框架,MVVM 是 vue 的理论模式,在 vue 框架中数据会主动驱动视图。咱们写 vue 就晓得它的单文件组件开发方式。
Model:数据层,仅仅关注数据自身,不关怀任何行为。

对应 vue 组件中的 data,props 属性。

View:视图层,用户操作页面,当 view-model 对 model 更新的时候,会通过数据绑定更新到 view。

对应 vue 组件中的 template 和 style 的局部。

ViewModel:业务逻辑层,view 须要什么数据,ViewModel 就提供什么数据,view 有些哪些操作,ViewModel 就要响应这些操作;View 和 ViewModel 两种交互方式:双向数据传递(数据属性和 data binding)和单向传递操作(命令属性);因为 ViewModel 的双向数据绑定,当 Model 发生变化时,ViewModel 就会更新,ViewModel 变动,Model 也会更新。

对应继承 Vue 类的组件实例

vue 在 MVVM 思维下,view 和 model 没有间接分割,然而 view 和 view-model、model 和 view-model 之间是会交互的。当 view 视图进行 dom 操作等使数据发生变化时,能够通过 view-model 同步到 model 中,同样的 model 数据变动也会同步到 vue 中。

MVVM 的数据绑定实现

  • 发布者 - 订阅模式(backbone.js)
  • 脏值模式(angular/react)
  • 数据劫持(vue)

Vue 实现 MVVM 的双向绑定

vue 数据劫持联合发布者 - 订阅者模式

vue 是采纳 数据劫持联合发布者 - 订阅者模式 的形式,通过 Object.defineProperty() 来劫持(监听)各个属性的 settergetter,在数据(对象)产生变动时公布音讯给订阅者,触发相应的监听回调。
因而,要实现 MVVM 的双向绑定就必须要实现以下几点:

  • 实现一个数据监听器 Observer。对数据对象的所有属性进行监听(包含子属性对象的属性),利用 Object.defineProperty() 对属性都加上 settergetter(这样的话,给这个属性的某个值赋值就会触发 setter, 那么就能监听数据的变动),如产生变动可拿到最新值并告诉订阅者。
  • 实现一个指令解析器 Compile。对 vue 每个元素节点的指令进行扫描和解析,将指令模板的变量都替换成数据,而后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,增加监听数据的订阅者,一旦数据产生变动,收到告诉,调用更新函数进行数据更新。
  • 实现一个订阅者 Watcher。Watcher 是 Observer 和 Compile 之间通信的桥梁,次要工作是订阅 Observer 中的属性值变动的音讯,当属性值发生变化时,触发指令解析器 Compile 中对应的更新函数,从而更新视图。
  • 实现 MVVM 入口函数,整合以上三者。

Vue 面试题之 vue 实现 MVVM 数据绑定

退出移动版