Vue——MVVM理解

目录

 

一、MVVM的组成：

 二、代码展示：

三、图片展示：

四、MVVM的实现原理：

---

一、MVVM的组成：

由Model、View、ViewModel三者组成。

Model：代表数据模型 、数据对象（data），数据和业务逻辑都在Model层中定义。

View：代表UI视图、模板页面，负责数据的展示。

ViewModel：视图模型，View和Model的关系映射。数据库结构往往是不能直接跟界面控件一一相对应的，需要再定义一个数据对象专门对应View上的视图控件。ViewModel的职责就是把Model对象封装成可以显示和接受输入的界面数据对象。

在MVVM架构下，View和Model没有直接的联系，他们通过ViewModel进行数据交互，ViewModel和Model之间是。ViewModel通过数据双向绑定把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护由ViewModel来统一管理。

 二、代码展示：

​
<!--View-->
<div id="app">
    <p>Hello {
   
   {username}}</p>
</div>
</body>
<script src="http://cdn.bootcss.com/vue/1.0.25/vue.js"></script>
<script>
    const vm = new Vue({ //VM :new出来的实例
        el:"#app", //element：选择器字符串，表明将表面哪个元素交给Vue管理
        data:{ //数据(Model)
            username:'Vue!'
        }
    })
</script>

​

三、图片展示：

四、MVVM的实现原理：

1.响应式：如何监听data的数据变化。

2.模板解析：模板如何被解析。

3.渲染：模板是如何被渲染成HTML。