Vue 核心之数据双向绑定

Vue双向绑定原理：Vue内部通过 Object.defineProperty方法以属性拦截的方式，把data对象的每个数据的读写转化为getter / setter，当数据变化时通知视图更新。

一、MVVM数据双向绑定

MVVM数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。


image.png

即：

  • 输入框内容变化时，Data 中的数据同步变化。View 导致 Data 的变化。（通过事件监听的方式来实现）
  • Data 中的数据变化时，文本节点的内容同步变化。Data 导致 View 的变化。（通过操作DOM实现）

监听器 Observer 只要是让对象变的 "可观测"，即每次读写数据时，我们能感知到数据被读取了或数据被改写了。Vue2.0源码中用到Object.defineProperty()来劫持各个数据属性的setter / getter。关于Object.defineProperty 方法，在 MDN 上是这么定义的：

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

二、Object.defineProperty() 语法

Object.defineProperty(obj, prop, descriptor)

参数：

  • obj： 要在其上定义属性的对象。
  • prop：要定义或修改的属性的名称。
  • descriptor：将被定义或修改的属性描述符。

返回值：被传递给函数的对象。
属性描述符：
Object.defineProperty() 为对象定义属性，分为数据描述符和存取描述符，两种形式不能混用。

数据描述符和存取描述符均具有以下可选键值：

  • configurable：一个总开关，一旦将它设为false，就不能删除或重新设置defineProperty监听的属性。为true时可以进行删除或重新使用defineProperty设置新值。默认为false。
  • enumerable：当属性值为true时，该属性才能出现在对象枚举的属性中。默认为false。

数据描述符具有以下可选键值：

  • value：该属性对应的值，可以为任意有效的 JavaScript值（数值、对象、函数等）。默认 undefined。
  • writable：设置属性值是否允许被赋值运算符改变。true为允许，false为不允许被重写。默认false。

存取描述符具有以下可选键值：

  • get：用于给属性提供 getter 方法，当访问该属性时，该方法会被执行，执行时不需要传入参数，但可以拿到this对象。默认为undefined。
  • set：用于给属性提供 setter 方法，当属性修改时，该方法会被执行。该方法接收唯一参数，即该属性新的参数值。默认为undefined。
通过 Object.defineProperty() 实现一个简单的输入框双向绑定：
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>defineProperty实现绑定</title>
    <script type="text/javascript" src="./example.js"></script>
</head>
<body>
    <div id="myApp">
        <input type="text" id="myInput" />
        <div id="myDiv"></div>
    </div>
</body>
<script type="text/javascript">
    var myInput = document.getElementById('myInput');
    var myDiv = document.getElementById('myDiv');
    
    let obj = {
        value: '监听数据'
    }
    
    // 将初始化数据赋值给元素
    myInput.value = obj.value;
    myDiv.innerHTML = obj.value;
    
    Object.defineProperty(obj, 'value', {
        set(newVal) {
            // 监听对象属性值改变,更新div元素innerHTML属性
            myDiv.innerHTML = newVal;
        }
    })
    
    myInput.oninput = function(e) {
        // 更新对象值,来触发Object.defineProperty的set方法
        obj.value = e.target.value;
    }
</script>
</html>

要了解Vue双向绑定原理，首先要明白三个概念：

1、观察者( observer )：数据监听器，负责对数据对象的所有属性进行监听劫持，并将消息发送给订阅者进行数据更新。
2、订阅者( watcher )：负责接收数据的变化，并执行更新视图(view)。数据与订阅者是一对多的关系。
3、解析器( compile )：负责对你的每个节点元素指令进行扫描和解析，负责相关指令的数据绑定初始化及创造数据对应的订阅者(每个通过指令绑定该属性数据的元素都是一个订阅者)。
html：
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双向绑定</title>
    <script type="text/javascript" src="./example.js"></script>
</head>
<body>
    <div id="myApp">
        <input type="button" value="加个!" z-on:click="fun1" />
        <input type="button" value="加个？" @click="fun2" />
        <input type="text" style="width:400px" z-model="site">
        <p z-html="site"></p>
        <p z-text="site"></p>
    </div>
</body>
<script type="text/javascript">
    var vm = new Example({
        el: '#myApp',
        data: {
            site: 'Vue双向绑定原理',
            age: 12,
            sex: '男'
        },
        methods: {
            fun1() {
                this.site += '!'
            },
            fun2() {
                this.site += '?'
            }
        }
    })
</script>
</html>
example.js双向绑定代码：
function Example(options) { // 创建构造函数Example,并接收对象结构体options
    this.$el = document.querySelector(options.el); // 获取指定挂载的元素
    this.$data = options.data; // 将数据挂载到实例
    this.$methods = options.methods; // 存放对象的方法
    this.binding = {}; // 所有与数据相关的订阅者对象都存放于此,$data下每个数据对应一个数组,用于对应多个订阅者
    
    this.observer(); // 调用观察者,对数据进行劫持
    this.compile(this.$el); // 对元素上绑定的指令如(v-model)进行解析,并创建订阅者.(所有绑定$data下该属性的元素都将成为该属性数据的订阅者)
}

// 观察者
Example.prototype.observer = function() {
    if (!this.$data || typeof this.$data !== 'object') return;
    
    var value = ''; // 记录$data每个属性的属性值
    for (var key in this.$data) { // 遍历数据对象
        value = this.$data[key]; // 对象属性值
        this.binding[key] = []; // 初始化数据订阅者,一对多关系,为一个数组
        var binding = this.binding[key]; // 存放当前数据相关的所有订阅者
        
        // 开始监听劫持
        this.defineReactive(this.$data, key, value, binding); // 通过创建方法实现数据分离,私有化,实现闭包
    }
}

Example.prototype.defineReactive = function (data, key, value, binding) {
    Object.defineProperty(data, key, {
        get() {
            return value; // 返回当前值
        },
        set(newVal) { // newVal 为设置修改后的新值
            if (newVal !== value) {
                value = newVal; // 更新数据
                // 以后该属性数据值改变后都会执行一次数据更新
                binding.forEach(watcher => {
                    watcher.update(); // 通知与本数据相关的订阅者们(即绑定该数据的DOM元素)进行视图更新
                })
            }
        }
    })
}

// 解析器 (解析指令并创建订阅者)
Example.prototype.compile = function(el) {
    var nodes = el.children; // 获取所有子节点(元素节点)
    for (var i = 0; i < nodes.length; i ++) { // 遍历子节点
        var node = nodes[i]; // 具体节点
        if (node.children.length > 0) { // 判断是否具有子节点
            this.compile(node); // 递归
        }
        
        if (node.hasAttribute("z-on:click")) { // 该节点是否拥有 z-on:click 指令
            var attrVal = node.getAttribute('z-on:click'); // 获取指令对应的方法名
            // 为元素绑定click事件,事件方法为$methods下的方法,并将this指向this.$data
            node.addEventListener('click', this.$methods[attrVal].bind(this.$data));
        }
        
        if (node.hasAttribute("@click")) { // 该节点是否拥有@click指令
            var attrVal = node.getAttribute('@click'); // 获取指令对应的方法名
            // 为元素绑定click事件,事件方法为$methods下的方法,并将this指向this.$data
            node.addEventListener('click', this.$methods[attrVal].bind(this.$data));
        }
        
        if (node.hasAttribute("z-model")) { // 该节点是否拥有z-model指令
            var attrVal = node.getAttribute('z-model'); // 获取指令对应的数据属性
            node.addEventListener("input", ((i) => { // 为指令添加input事件
                this.binding[attrVal].push(new Watcher(node, "value", this, attrVal)); // 将该元素添加为当前数据的订阅者，并将数据初始值作用与绑定指令的元素上

                return () => { // input事件处理函数
                    this.$data[attrVal] = nodes[i].value; // 更新$data的属性值,会在观察者中劫持
                }
            })(i));
        }
        
        if (node.hasAttribute("z-html")) { // 该节点是否拥有z-html指令
            var attrVal = node.getAttribute('z-html'); // 获取指令对应的数据属性
            this.binding[attrVal].push(new Watcher(node, 'innerHTML', this, attrVal));
        }
        
        if (node.hasAttribute('z-text')) { // 该节点是否用拥有z-text指令
            var attrVal = node.getAttribute('z-text'); // 获取指令对应的数据属性
            this.binding[attrVal].push(new Watcher(node, 'innerText', this, attrVal));
        }
    }
}

// 订阅者
function Watcher(el, attr, vm, val) {
    this.el = el; // 指令对应的元素
    this.attr = attr; // 要更改的元素属性
    this.vm = vm; // 指令所在实例
    this.val = val; // 指令绑定的值
    this.update(); // 更新视图view
}
// 数据变化，更新视图。
Watcher.prototype.update = function() {
    this.el[this.attr] = this.vm.$data[this.val];
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,723评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,485评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,998评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,323评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,355评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,079评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,389评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,019评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,519评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,738评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,293评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2赞 345