mvc与mvvm的设计思想

mvc:

Model:数据模型,用来存储数据
View:视图界面,用来展示UI界面和响应用户交互
Controller:控制器(大管家角色),监听模型数据的改变和控制视图行为、处理用户交互

 

mvvm:

 

 Vue为MVVM框架,当数据模型data变化时,页面视图会得到响应更新;

其原理对data的getter/setter方法进行拦截(Object.defineProperty或者Proxy),

利用发布订阅的设计模式,在getter方法中进行订阅,在setter方法中发布通知,让所有订阅者完成响应。

在响应式系统中,Vue会为数据模型data的每一个属性新建一个订阅中心作为发布者,

而监听器watch、计算属性computed、视图渲染template/render三个角色同时作为订阅者,

对于监听器watch,会直接订阅观察监听的属性,

对于计算属性computed和视图渲染template/render,

如果内部执行获取了data的某个属性,就会执行该属性的getter方法,

然后自动完成对该属性的订阅,

当属性被修改时,就会执行该属性的setter方法,从而完成该属性的发布通知,通知所有订阅者进行更新

 

vue的双向绑定
(1) 定义: 数据变化视图会自动更新,视图变化数据也会更新
(2) 原理: 数据劫持 + 发布订阅者模式
(3) 实现:采用Object.defineProperty()对数据进行劫持来监听数据变化,并通过getter/setter方法对数据进行读写。其次vue通过发布订阅者模式,维护了一个订阅者数组,当数据发生改变时,vue会通知所有订阅者进行更新,因此当用户在页面上进行修改时。Vue会更新对应的数据,并通知所有订阅者更新视图,同时当数据发生变化时,Vue也会更新对应视图,通过这样的机制,Vue实现了双向绑定
(4) 订阅者是一个概念,它是用于管理更新视图的对象,当数据发生变化时,Vue会通知所有的订阅者进行更新。每一个挂载到视图上的组件或者每一个watcher都可以被看作是一个订阅者,他们订阅了某一个数据的变化,并等待数据发生变化时进行更新,订阅者是Vue实现双向数据绑定的关键组成部分

 

posted on 2021-03-26 09:51  sss大辉  阅读(79)  评论(0编辑  收藏  举报

导航