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

  • 相关阅读:
    Codechef EDGEST 树套树 树状数组 线段树 LCA 卡常
    BZOJ4319 cerc2008 Suffix reconstruction 字符串 SA
    Codechef STMINCUT S-T Mincut (CodeChef May Challenge 2018) kruskal
    Codeforces 316G3 Good Substrings 字符串 SAM
    Codechef CHSIGN Change the Signs(May Challenge 2018) 动态规划
    BZOJ1396 识别子串 字符串 SAM 线段树
    CodeForces 516C Drazil and Park 线段树
    CodeForces 516B Drazil and Tiles 其他
    CodeForces 516A Drazil and Factorial 动态规划
    SPOJ LCS2
  • 原文地址:https://www.cnblogs.com/yihan123/p/14287092.html
Copyright © 2011-2022 走看看