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数据绑定

  • 相关阅读:
    转载Crazybingo的文章: 第三章 创造平台——Quartus II 11.0 套件安装指南
    Can't launch the ModelSim-Altera software
    一种简单的ADV7842调试视频pixel_cnt/line的办法.
    调试ADV7842的点滴 之 hdmi
    沿检测使能,时钟同步化
    global clock network
    捡到篮子里边的都是菜
    (转)时序分析基本公式
    Spring中的AOP(一)
    AOP的概念
  • 原文地址:https://www.cnblogs.com/yihan123/p/14287092.html
Copyright © 2011-2022 走看看