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

最新推荐文章于 2025-05-16 20:42:11 发布

开心大表哥

最新推荐文章于 2025-05-16 20:42:11 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：基础加固 vue项目开发

本文链接：https://blog.youkuaiyun.com/a419419/article/details/80204111

基础加固同时被 3 个专栏收录

27 篇文章

订阅专栏

vue项目开发

27 篇文章

订阅专栏

js设计模式

9 篇文章

订阅专栏

本文介绍MVVM模式的概念及优点，并详细解析Vue.js中实现双向数据绑定的技术原理，包括数据劫持与发布者-订阅者模式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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函数里面对该值做了加工了。如果这个时候我们执行下下面的语句，控制台会输出什么？
这里写图片描述