MVVM

最新推荐文章于 2020-12-23 10:54:52 发布
最新推荐文章于 2020-12-23 10:54:52 发布
阅读量179 收藏
点赞数
分类专栏： Vue.js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mikon_0703/article/details/109717337
版权

MVVM由三部分组成

  • View：界面
  • Model：数据模型
  • ViewModel：作为桥梁负责沟通 View 和 Model

在MVVM中，UI通过数据驱动，数据改变就会刷新相应的UI，UI改变也会改变相应的数据
ViewModel只关心数据和业务的处理，View和Model相互独立，ViewModel可放置一些可复用的逻辑

  • 脏数据检测
    当触发指定事件之后，进入到脏数据检测，调用$digest循环遍历所有的数据观察者，判断当前值是否和先前的值有区别，若有变化则调用$watch函数，然后再次调用 $digest循环遍历直至没有发现变化。
    特点：可以批量检测出更新的值，再统一更新UI，减少DOM操作次数

  • 数据劫持
    Vue内部使用Object.defineProperty()实现双向绑定，监听set和get事件

  • Proxy 与 Object.defineProperty 对比
    Object.defineProperty
    （1）只能对属性进行数据劫持，需要深度遍历整个对象
    （2) 数组不能监听数据的变化
    Proxy原生支持监听数组变化，并且可以对整个对象进行拦截

  • 路由原理
    监听url的变化，然后匹配路由规则，显示相应的页面，并且无须刷新
    hash模式
    www.test.com/##/就是hash url，当##后面的哈希值发生变化时，不会向服务器请求数据，可以通过hashchange事件监听url变化，从而进行跳转页面。
    在这里插入图片描述

history模式
html5新推出的功能
在这里插入图片描述

草莓味的狮子座leo
关注
专栏目录
Mvvm
11-12
**Mvvm 模式详解** Mvvm（Model-View-ViewModel）是一种软件设计模式，尤其在现代UI开发中被广泛采用，特别是在WPF、Xamarin、Android、iOS以及UWP等平台的应用开发中。该模式将应用程序的业务逻辑、用户界面和数据...
MVVM和MVC区别是什么？哪些场景适合？
m0_57712926的博客
08-22 406
目录前言一、基本定义1、MVVM基本定义2、MVC基本定义二、使用场景三、两者之间的区别总结 前言 一、基本定义 1、MVVM基本定义 MVVM即Model-View-ViewModel的简写，即模型-视图-视图模型，模型（Model）指的是后端传递的数据，视图（View）指的是所看到的的页面，视图模型（ViewModel）是mvvm模式的核心，它是链接view和model的桥梁。它有两个方向： 一是将模型（Model）转化成视图（View），即将后端传递的数据转化成所看到的的页面，实现的方式是：数
从头开始：详解MVVM、MVVMLight
Rvng2014的博客
05-10 204
究竟为什么要学习MVVM？ 相信大部分同学在刚开始接触MVVM的时候（包括我自己），心里默默在想这究竟是什么玩意？一个简单的功能要写一大段代码才能完成，在看到MVVM的核心目标： 1.让UI界面与逻辑能够很好地分离又协同工作。 2.让逻辑代码更具有可测试性。 会觉得我不把我的UI和逻辑分离，我的代码一样可以很好的分离又协同工作； 会觉得我不...
mvvm
nanling0220的博客
04-05 248
mvc 模式。 之前的市面是很常见很流行的一个概念，一个编程规范。 mvvm： model(模型-数据) + view(视图) + viewModel(视图模型) 遵循的基本原则： 数据驱动视图的方式 mvvm 的本质上， 就是mvc的改进版，mvvm 就是将其中的 view的状态和行为 抽象化 ViewModel 的任务 ： 让我们将视图和数据区分开，并通过vm来建立连接 ...
MVVM简介与运用
热门推荐
chun_long的博客
08-01 6万+
前言 在介绍MVVM框架之前，先给大家简单介绍一下MVC、MVP框架（由于本博文主要讲解MVVM，所以MVC和MVP将简化介绍，如果需要我将在以后的博文中补充进来）。 MVC框架： M-Model : 业务逻辑和实体模型(biz/bean) V-View : 布局文件(XML) C-Controller : 控制器(Activity) 相信大家都熟悉这个框架，这个也是初学者最常用的
MVVM案例Demo示例
09-01
**MVVM模式详解** MVVM（Model-View-ViewModel）是一种软件设计模式，广泛应用于现代UI开发，尤其是在WPF、Xamarin、Angular、React以及Vue等框架中。它源自MVC（Model-View-Controller）模式，但在UI层面上进行了...
MVVM（GalaSoft.MvvmLight）简单小项目和其它MVVM框架（CommunityToolkit.Mvvm）
最新发布
10-09
MVVM（GalaSoft.MvvmLight）简单小项目和其它MVVM框架（CommunityToolkit.Mvvm）
Avalonia 项目使用ReactiveUI实现的MVVM
06-13
ReactiveUI则是一个响应式和函数响应式的MVVM（Model-View-ViewModel）框架，它基于Reactive Extensions (Rx) 库，为开发者提供了强大的数据绑定和事件处理能力。在这个Demo中，我们将深入探讨如何在Avalonia项目中...
初识MVVM
阳
09-30 846
昨天面试的时候被问到了是否用过MVVM架构。当时我就蒙了，MVVM到底是什么东西，做什么的，难道和MVC差不多吗？所以结果也可想而知了。到了晚上做梦的时候脑子里还回荡着MVVM的疑问，所以早上起来，赶紧查了查MVVM到底是何方圣神。 MVVM概念：       MVVM是Model-View-ViewModel的简写。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、
浅谈MVC,MVP,MVVM三大架构
weixin_43845137的博客
08-14 420
目录MVC开发模式和框架MVP开发模式和框架MVVM开发模式和框架 MVC开发模式和框架 M：—Model（模型）—是对数据的储存和处理，再传递给视图层相应或者展示 V：—View（视图） —完成前端的数据展示 C：—Controller（控制器） —对数据的接收和触发事件的接收和传递 MVP开发模式和框架 M：Model（模型） V：View（视图 P：Presenter（表示器，中间人） 关于MVC和MVP的不同，那那么得知道他们的区别，也就是C与P，C就是控制器是作为控制器，把控制这架构，而且M和V是
Vue中的MVVM
恋、鑫如雨
11-04 3232
什么是MVVM？ 概念介绍 MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器） 1、 M：模型层，主要负责业务数据相关； 2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层； 3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点； MVVM支...
MVVM的含义
li222248的博客
11-01 754
一、什么是MVVM ？是一种思想/架构/规则 M : model 模型 相当于生活中的仓库 专门存放数据的 V ：view 视图 展示数据 VM: viewmodel 监控模型数据变化 自动同步到视图 二、为什么要学MVVM框架? ①统一开发规范，加快开发速度 ②增强代码可维护性、可扩展性 ...
MVVM的入门使用之含义了解
ZKhero的博客
03-20 470
项目中要用到MVVM的框架了，平时又忙的没有时间，慢慢来积累下把，下篇写代码1. 与MVP框架类似，主要利用4个特性，数据绑定（Data Binding） 依赖属性（Depandency Property） 命令（Command） 路有事件（Routed Event）；M---数据Model； V---View对应的activity或者xml文件，主要是绘制和交互； VM---ViewModel，...
Vue-Vnode类型
Mikon_0703
12-23 1246
Vnode的类型 1.注释节点 export const createEmptyVNode = text => { const node = new VNode() node.text = text; node.isComment = true; return node } // 一个注释节点只有两个有效属性` text `和 `isComment` 2.文本节点 export function createT
Vue-循环引用
Mikon_0703
11-25 883
一、递归组件 组件在自身的模板中调用自身的，通过name选项 例如：name：‘unique-name-of-my-component’ 使用Vue.component注册全局组件时，全局的id会自动设置为该组件的name选项 Vue.component('unique-name-of-my-component', { // ... }) 二、组件之间的循环引用 组件在渲染树中护卫对方的后代/祖先——一个悖论；先把两个组件设为A和B，模块系统发现需要A，但是A依赖于B，B又依赖于A，如此往
Vue虚拟dom的优化
Mikon_0703
12-22 599
虚拟节点vnode包含以下属性 { tag:'div' //标签名 data:{...} // 属性数据 attrs、props、event、style、class children:[...] // 子节点数据，vnode结构 text: undefined // 文本 elm: undefined // 真实dom key: undefined // 节点标识 } Vue的优化策略 尝试几种可能的变化，快速查找差异，减少不必要的循环 …前：子节点列表中所有未处理的..
Vue深入响应式原理
Mikon_0703
12-18 574
Vue响应式：数据发生变化，会重新渲染页面 完成这个过程，我们需要： 侦查数据的变化 数据劫持 / 数据代理 收集视图依赖的数据 依赖收集 数据变化时，自动通知需要更新的视图部分进行更新 发布-订阅模式 一、如何侦查数据的变化 - 数据劫持 使用Object.defineProperty和Proxy 数据模型是普通的js对象，把一个普通的js对象传入Vue实例当作data选项，Vue会遍历此对象的property，并使用Object.defineProperty把property全部转为ge
Silverlight MVVM模式详解
"本文档介绍了如何在Silverlight应用中使用MVVM（Model-View-ViewModel）设计模式，通过一个简单的例子展示了MVVM模式的基础结构和基本使用方法。" 在Silverlight开发中，MVVM模式是一种广泛采用的设计模式，它将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值