数据双向绑定

MVVM

  • M:model数据模型
  • V:view 界面
  • MV:作为桥梁负责沟通view跟model

数据的双向绑定就是 view>>model,model>>view

数据绑定

在正式开始之前我们先来说说数据绑定的事情,数据绑定我的理解就是让数据M(model)展示到 视图V(view)上。我们常见的架构模式有 MVC、MVP、MVVM模式,目前前端框架基本上都是采用 MVVM 模式实现双向绑定,Vue 自然也不例外。但是各个框架实现双向绑定的方法略有所不同,目前大概有三种实现方式。

  • 发布订阅模式
  • Angular 的脏查机制
  • 数据劫持

Vue 则采用的是数据劫持与发布订阅相结合的方式实现双向绑定。

思路分析

实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据:


image.png

所以数据的双向绑定包含两个方面:

  • 如何检测到视图的变化然后去更新数据
  • 如何检测到数据的变化然后通知我们去更新视图

检测视图这个比较简单,无非就是我们利用事件的监听即可。因为view更新data其实可以通过事件监听即可,比如input标签监听 'input' 事件就可以实现了。

关键点在于data如何更新view,所以我们着重来分析下,当数据改变,如何更新视图的。

数据更新视图的重点是如何知道数据变了,只要知道数据变了,那么接下去的事都好处理。如何知道数据变了,其实上文我们已经给出答案了,就是通过Object.defineProperty( )对属性设置一个set函数,当数据改变了就会来触发这个函数,所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了

image.png

Object.defineproperty()

Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象

Object.defineProperty(obj, prop, descriptor)
  • obj:指定要修改或定义的对象。
  • prop:要定义或修改的属性的名称。
  • descriptor:将被定义或修改的属性描述符。
const obj = {};
Object.defineProperty(obj,'hello',{//指定要修改的对象,以及要增加的属性hello
    get(value){
        console.log("啦啦啦,方法被调用了");
    },
    set(newVal,oldVal){
        console.log("set方法被调用了,新的值为" + newVal)
    }
})
obj.hello; //get方法被调用了
obj.hello = "1234"; //set方法被调用了

实现最简单的双向绑定





上面这个实例实现的效果是:随着文本框输入文字的变化,span会同步显示相同的文字内容。同时在控制台用js改变obj.hello,视图也会更新。这样就实现了view->modelmodel->view的双向绑定。

实现data更新view

我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

流程图如下:


image.png

监听器Observer

Observer是一个数据监听器,其实现核心方法就是前文所说的Object.defineProperty( )。如果要对所有属性都进行监听的话,那么可以通过递归方法遍历所有属性值,并对其进行Object.defineProperty( )处理。如下代码,实现了一个Observer

function defineReactive(data, key, val) {
    observe(val); // 递归遍历所有子属性
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            return val;
        },
        set: function(newVal) {
            val = newVal;
            console.log('属性' + key + '已经被监听了,现在值为:“' + newVal.toString() + '”');
        }
    });
}
 
function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};
 
var library = {
    book1: {
        name: ''
    },
    book2: ''
};
observe(library);
library.book1.name = 'vue权威指南'; // 属性name已经被监听了,现在值为:“vue权威指南”
library.book2 = '没有此书籍';  // 属性book2已经被监听了,现在值为:“没有此书籍”

思路分析中,需要创建一个可以容纳订阅者的消息订阅器Dep,订阅器Dep主要负责收集订阅者,然后再属性变化的时候执行对应订阅者的更新函数。所以显然订阅器需要有一个容器,这个容器就是list,将上面的Observer稍微改造下,植入消息订阅器:

function defineReactive(data, key, val) {
    observe(val); // 递归遍历所有子属性
    var dep = new Dep(); 
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if (是否需要添加订阅者) {
                dep.addSub(watcher); // 在这里添加一个订阅者
            }
            return val;
        },
        set: function(newVal) {
            if (val === newVal) {
                return;
            }
            val = newVal;
            console.log('属性' + key + '已经被监听了,现在值为:“' + newVal.toString() + '”');
            dep.notify(); // 如果数据变化,通知所有订阅者
        }
    });
}
 
function Dep () {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

从代码上看,我们将订阅器Dep添加一个订阅者设计在getter里面,这是为了让Watcher初始化进行触发,因此需要判断是否要添加订阅者,至于具体设计方案,下文会详细说明的。在setter函数里面,如果数据变化,就会去通知所有订阅者,订阅者们就会去执行对应的更新的函数。到此为止,一个比较完整Observer已经实现了,接下来我们开始设计Watcher。

订阅者 Watcher

Watcher 主要是接受属性变化的通知,然后去执行更新函数去更新视图,所以我们做的主要是有两步:

  • 把 Watcher 添加到 Dep 容器中,这里我们用到了 监听器的 get 函数
  • 接收到通知,执行更新函数。

Compile 解析器

虽然上面已经实现了一个双向数据绑定的例子,但是整个过程都没有去解析dom节点,而是直接固定某个节点进行替换数据的,所以接下来需要实现一个解析器Compile来做解析和绑定工作。解析器Compile实现步骤:

  • 解析指令,并替换模板数据,初始化模板
  • 将模板指令对应的节点绑定对应的更新函数,初始化相应的订阅器

因为在解析 DOM 节点的过程中我们会频繁的操作 DOM, 所以我们利用文档片段(DocumentFragment)来帮助我们去解析 DOM 优化性能。

然后我们就需要对整个节点和指令进行处理编译,根据不同的节点去调用不同的渲染函数,绑定更新函数,编译完成之后,再把 DOM 片段添加到页面中。

总结

  • 数据的双向绑定其实是view更新驱动model更新;model更新驱动view更新。MVVM思想。
  • view更新驱动model实现比较简单。利用监听就可以实现,监听到视图的变化,在赋值给数据就可以。
  • model更新驱动view实现比较复杂。
  • 实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。用object.defineProperty()重写数据的get/set。值更新就在set中通知订阅者更新数据
  • 实现一个解析器Compile,深度遍历dom树,对每个元素节点的指令模板替换数据以及订阅数据。
  • 实现Watcher用于连接Observer和compile,能够订阅并接受每一个属性的变动的通知,执行指令绑定的相应的回调函数,从而更新数据。

参考文章

重温vue双向绑定原理解析

vue的双向绑定原理及实现

记一次忏悔的前端面试经验(Vue 双向绑定原理)

Vue双向绑定原理,教你一步一步实现双向绑定

你可能感兴趣的:(数据双向绑定)