vue数据绑定原理

关于数据绑定

在前端开发中使用MV*模型的时候，M—model，指的是模型，即指的是数据，V—view指的是视图，就是页面展示的部分。
通常所说的数据的双向绑定就是
- model（数据）改变时，view（视图）也会变化
- view（视图）变化时，model（数据）也会变化
本文参考：
- 剖析Vue原理&实现双向绑定MVVM
- Vue 双向数据绑定原理分析

关于框架中常用的数据绑定做法

• 发布者-订阅者模式（backcone.js)
• 脏值检测（angular.js）
• 数据劫持（vue.js）

思路整理

vue使用数据劫持+发布者-订阅者模式进行双向数据绑定，其中最核心的方法就是通过Object.defineProperty()实现数据的劫持，达到监听数据的变动的目的。
整理一下vue进行数据绑定的思路：
1. 实现一个数据监听器Observer,能够进行数据对象的属性监听和更新。
2. 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，并且根据指令进行绑定值的提取。
3. 实现一个Watcher作为连接Observer和Compile的桥梁，并可以接受到属性的变动，进行相应属性的更新，从而实现视图的更新。
4. 使用Vue入口函数，整合三者。

实现双向绑定

• 入口函数Vue编写

function Vue(options) {//options就是new Vue传递对象参数
        this.data = options.data;
        this.id = options.el;
        Observer(this.data, this);//进行数据劫持和更新
        var app = document.getElementById(this.id);//div
        var dom = nodeToFragment(app, this);//进行虚拟DOM操作
        app.appendChild(dom);//将虚拟DOM插入文档中
    }

• 数据劫持函数Observer

  function Observer(data, vm) {
        Object.keys(data).forEach(function (key) {//循环遍历出每一个值进行数据劫持
            defineReactive(vm, key, data[key]);
        })
    }

    function defineReactive(vm, key, val) {
        Object.defineProperty(vm, key, {//当数据发生变化时调用set进行更新，获取数据时使用set
            get: function () {
                return val;
            },
            set: function (newVal) {
                if (newVal === val) {
                    return;
                }
                val = newVal;
            }
        })
        return val;
    }

• 指令解析函数Compile

 function nodeToFragment(node, vm) {
        var flag = document.createDocumentFragment();
        var child;
        while (child = node.firstChild) {
            Compile(child, vm);
            flag.appendChild(child);
        }
        return flag;
    }

function Compile(node, vm) {
        var reg = /\{\{(.*)\}\}/;
        if (node.nodeType === 1) {
            var attr = node.attributes;
            for (var i = 0; i < attr.length; i++) {
                if (attr[i].nodeName === 'v-model') {
                    var name = attr[i].nodeValue;
                    node.value = vm[name];
                    node.removeAttribute('v-model');
                }
            }
        }
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                var name = RegExp.$1;
                node.nodeValue = vm[name];
            }
        }
    }

• node.nodeType
  
  1. 元素节点 =1
  2. 属性节点=2
  3. 文本节点= 3
  4. 注释节点= 8
     
     • node.attributes属性

用法：
document.getElementsById("app").attributes;
node.attributes

描述
attributes 属性返回指定节点的属性集合，即 NamedNodeMap。
提示：您可以使用 length 属性来确定属性的数量，然后您就能够遍历所有的属性节点并提取您需要的信息。
- 订阅者-发布者模式Watcher
Watcher订阅者作为Observer和Compile之间的桥梁，主要做一下工作：
1. 编写属性订阅器Dep，可以调用notice进行Watcher的更新，和添加订阅者
2. 自身有一个update()方法
3. 当属性调用notice()方法时可以进行调用update()方法

  function Dep() {
        this.subs = [];
    }

    Dep.prototype = {
        addSub: function (sub) {
            this.subs.push(sub);//增加订阅者
        },
        notify: function () {
            this.subs.forEach(function (sub) {
                sub.update();
            })
        }
    }
function watcher(vm, node, name, nodeType) {
        Dep.target = this;
        this.vm = vm;
        this.node = node;
        this.name = name;
        this.nodeType = nodeType;
        this.update();
        Dep.target = null;
    }

    watcher.prototype = {
        update: function () {
            this.get();
            if (this.nodeType == 'text') {
                this.node.nodeValue = this.value;
            }
            if (this.nodeType == 'input') {
                this.node.value = this.value;
            }
        },
        //获取data中属性
        get: function () {
            this.value = this.vm[this.name];
        }
    }

• 最后
  
  1. 进行Vue的声明

 var App = new Vue({
        el: 'app',
        data: {
            title: 'hello'
        }
    })

1. 在Compile中进行事件触发,以及watcher的调用

 node.addEventListener('input', function (e) {
       vm[name] = e.target.value;
  })
 new Watcher(vm, node, name);

1. 数据劫持时添加dep

function defineReactive(vm, key, val) {
        var dep = new Dep();
        Object.defineProperty(vm, key, {
            get: function () {
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return val;
            },
            set: function (newVal) {
                if (newVal === val) {
                    return;
                }
                val = newVal;
                dep.notify();
            }
        })
        return val;
    }