zoukankan      html  css  js  c++  java
  • 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数据绑定

  • 相关阅读:
    D. Babaei and Birthday Cake--- Codeforces Round #343 (Div. 2)
    Vijos P1389婚礼上的小杉
    AIM Tech Round (Div. 2) C. Graph and String
    HDU 5627Clarke and MST
    bzoj 3332 旧试题
    codeforces 842C Ilya And The Tree
    codesforces 671D Roads in Yusland
    Travelling
    codeforces 606C Sorting Railway Cars
    codeforces 651C Watchmen
  • 原文地址:https://www.cnblogs.com/yihan123/p/14287092.html
Copyright © 2011-2022 走看看