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

mvvm（Model-View-ViewModel）模式：由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，结构如下图。通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。使用MVVM模式有几大好处：　　1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Mo...

开心大表哥

3382人浏览 · 2018-05-05 11:30:51

开心大表哥 · 2018-05-05 11:30:51 发布

mvvm（Model-View-ViewModel）模式：
由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，结构如下图。
这里写图片描述
通过这三部分实现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);
    }
});

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

什么是Object.defineProperty()
这里写图片描述

双向数据绑定的模式是view改变是更新data，data改变的时候更新view。view改变后更新data可以通过事件监听来实现，这不是问题，问题是data改变后如何更新到view。
这里写图片描述
参考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>

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
  set: function (value) {
    name = value;
    console.log('你取了一个书名叫做' + value);
  },
  get: function () {
    return '《' + name + '》'
  }
})
Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
console.log(Book.name);  // 《vue权威指南》

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^