zoukankan      html  css  js  c++  java
  • MVVM、MVC 架构思想

    MVC

    一种设计模式,mvc分别表示M数据层,V视图层,C控制层

    视图层跟数据层是独立的,不能直接通信,是通过控制层来将model中的数据拿给view用,通过用户在视图层输入的指令来选取数据层中的数据

    这样是为了解耦跟重用

    MVVM 设计思想

    M数据,V视图,VM视图模型调用数据渲染视图的 

    MVVM模式中的视图层跟数据层也是独立的,通过VM来通信,当数据变化VM监听到这种变化通知视图做更新,当用户操作视图VM通知数据做改动

    区别于MVC的控制层,vm将数据转换或封装

    vm两个方向, (1)将模型转为视图 后端数据转为看到的页面  用数据绑定实现

            (2)视图转为模型  所见页面转为后端数据         用DOM事件监听实现

    两个方向都实现叫数据的双向绑定

    MVVM模式实现的是业务逻辑组件的重用,MVC模式出现的较早,vm也不是完全取代了mvc的控制器

    vue中双向数据绑定的实现 观察者--订阅者

    new Vue的时候vue就进入了初始化阶段

    一方面,将JS对象传给vue实例的data时,vue(通过遍历)会劫持监听所有属性,用Object.defineProperty()将这些方法转换为getter,setter方法

    当data中属性被访问调用getter方法,data中属性被改变时,调用setter方法

    另一方面,vue的指令编辑器会对vue元素节点的指令进行解析,初始化视图,订阅watcher来更新视图,当数据发生变化,setter方法被触发后,setter会立即调用Dep.notifty,dep开始遍历所有订阅者,调用订阅者updata方法,通知视图做更新

  • 相关阅读:
    JavaScript 工作必知(九)function 说起 闭包问题
    AngularJs(七) 模块的创建
    javaScript 工作必知(八) 属性的特性 值、写、枚举、可配置
    javaScript 工作必知(七) 对象继承
    javaScript 工作必知(六) delete in instanceof
    数据可视化产品示例和相关文章
    echarts的世界地图json
    webstorm使用svn
    初识产品运维
    UglifyJS 压缩选项
  • 原文地址:https://www.cnblogs.com/dudududadada/p/13207451.html
Copyright © 2011-2022 走看看