一图看懂什么是MVVM

最新推荐文章于 2023-02-20 15:48:06 发布

MyKyle18

最新推荐文章于 2023-02-20 15:48:06 发布

阅读量558

点赞数

分类专栏：新手前端路

本文链接：https://blog.csdn.net/qq_18547381/article/details/104288313

版权

新手前端路专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1.什么是MVVM模型？

mvvm是Model-View-ViewModel的缩写。

-model：数据

-view：视图

-ViewModel:视图模型

2.mvvm在html中的表现

这是一个普通的应用mvvm（vue）框架的html页面

这是页面中对应的mvvm中的每个部分

下边是代码：复制可以直接运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{  list-style: none;  }li{  background-color: yellowgreen;  margin: 10px;  }
    </style>
</head>
<body>
<ul id="vm">
    <li v-for="item in nameList">
        姓名:{{item.name}}
        年龄:{{item.age}}
        编号:{{item.id}}
    </li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var list=[{id:1,name:'小红',age:13},
        {id:2,name:'小黄',age:3},
        {id:3,name:'大紫',age:4}];

    var vm=new Vue({
        el:"#vm",
        data:{
          nameList:list
        },
        methods:{
            get:function () {
               console.log(1);
            }
        }
    })

</script>
</body>
</html>

这是页面的展示效果，也是‘mvvm’结构中view视图的部分

到此解释完了一个mvvm模型在一个html页面中的表现，可见vue主要实现的就是mvvm中的ViewModel（视图模型），通过vue把view（视图）和model（数据）链接起来。

3.MVVM模式

MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

4. 实现原理

mvvm类框架的实现原理不复杂，大致如下：

模板分析得到依赖的属性
通过某种变动监测手段监测这些依赖的属性
当属性变动的时候，触发相应的directive（指令）的处理逻辑即可

实际上，directive的处理逻辑不一定是对view进行操作，比如上报。但是，在mv的思想下，建议对view的操作都集中在directive里实现

从最核心上看，mv思想仅仅是一个观察者模式的具体应用于延展而已

MyKyle18

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
一图看懂什么是MVVM

什么是MVVM模型？mvvm是Model-View-ViewModel的缩写。-model：数据-view：视图-ViewModel:视图模型mvvm在html中的表现一个html页面中到底哪一部分是model，哪一部分是view，哪一部分是viewmodel呢，我们总是想确切具体的知道他们所对应的部分，下边通过两张图指出这些部分。如果你清楚的知道mvvm在h...
复制链接

扫一扫