简要理解vue的mvvm模式中的双向数据绑定

超、凢脫俗 2022-05-25 01:14 170阅读 0赞

**mvvm（Model-View-ViewModel）模式：**  
由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，结构如下图。  
![这里写图片描述][70]  
通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。

**使用MVVM模式有几大好处：**

1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2. 可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。

3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

4. 可测试性。可以针对ViewModel来对界面(View)进行测试

vue中支持mvvm的核心就是双向数据绑定机制。  
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，那么vue是如果进行数据劫持的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。

var vm = new Vue({
        data: {
            obj: {
                a: 1
            }
        },
        created: function () { 
            console.log(this.obj);
        }
    });

![这里写图片描述][70 1]  
我们可以看到属性a有两个相对应的get和set方法，为什么会多出这两个方法呢？因为vue是通过Object.defineProperty()来实现数据劫持的。

什么是[Object.defineProperty()][Object.defineProperty]  
![这里写图片描述][70 2]  
![这里写图片描述][70 3]

双向数据绑定的模式是view改变是更新data，data改变的时候更新view。view改变后更新data可以通过事件监听来实现，这不是问题，问题是data改变后如何更新到view。  
![这里写图片描述][70 4]  
参考vue的做法就是通过set,get来实现。

**下面我们来看两个data改变后更新view的DOM:**  
**1.改变prop这个属性的值后，通过set立即更新到view**

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="UTF-8"> 
     <title>test</title> 
     </head> 
     <body> 
     <div id="test">测试</div> 
     <script> var view = document.getElementById("test"); var data = {}; var i=0; Object.defineProperty(data, "prop", { set: function(newValue) { //当data.b的值改变的时候更新＃test的视图 view.textContent=newValue; }, get: function() { } }); setInterval(function(){ console.log(data) i++; data.prop = "data.prop的值更新了，我要更新视图"+i; },1000); </script> 
     </body> 
    </html>

我们通过Object.defineProperty( )设置了对象Book的name属性，对其get和set进行重写操作，顾名思义，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数，所以当执行 Book.name = ‘vue权威指南’ 这个语句时，控制台会打印出 “你取了一个书名叫做vue权威指南”，紧接着，当读取这个属性时，就会输出 “《vue权威指南》”，因为我们在get函数里面对该值做了加工了。如果这个时候我们执行下下面的语句，控制台会输出什么？  
![这里写图片描述][70 5]

以上是对vue中的mvvm和双向数据绑定的简要理解，内容不深，适合入门，不喜勿喷！喜欢可以点个赞或者关注，嘻嘻！

[70]: /images/20220525/831dde302c15409bbcc4c3a39f9b7146.png
[70 1]: /images/20220525/b9d9e4e7f72b4e978600186cda55a930.png
[Object.defineProperty]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
[70 2]: /images/20220525/5a53a96a7ab84e1d926e9447c1b7e278.png
[70 3]: /images/20220525/794e8d6909304ee3bdf053fd9a7a8d10.png
[70 4]: /images/20220525/3ea9fb3b26724fc49fb1ed169bf18fc4.png
[70 5]: /images/20220525/a3a87a941d32481681e3cba93fbe4ded.png