原理说明

  1. 通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树。
  2. 一旦被监测的数据改变，会通过Object.defineProperty定义的数据拦截，截取到数据的变化。

截取到的数据变化，从而通过订阅——发布者模式，触发Watcher（观察者）,从而改变虚拟dom的中的具体数据。

  1. 最后，通过更新虚拟dom的元素值，从而改变最后渲染dom树的值，完成双向绑定

Vue的模式是m-v-vm模式，即（model-view-modelView），通过modelView作为中间层（即vm的实例），进行
双向数据的绑定与变化。
而实现这种双向绑定的关键就在于：
Object.defineProperty和订阅—发布者模式这两点。

最终效果

GIF2.gifHTML代码

  1. <div id="app">
  2.   <input type="text" v-model="text">
  3.   {{text}}
  4. </div>

JS代码

  1. /*
  2.           *
  3.           * 第一步：创建一个observe去监听vue的实例vm中data的所有属性
  5.             第二步：调用nodeToFragment()
  6.             ①==劫持==id=‘app’的元素下的所有子节点。(后面对于DOM的操作都在这里进行操作，最后更新完成再更新到我们真正的DOM树上，避免对DOM的反复操作)
  7.             ②在这里调用解析器compile
  9.             第三步：compile()
  10.             ①遍历dom中节点是否有v指令属性，有的话就对视图进行==初始化==(如：把上面的text:‘hello world’初始化到<input type="text" v-model="text">的value中)
  11.             ②为所有有v指令的节点==创建一个watcher==，并把对应的动态绑定属性值传过去
  12.             compile中与Observer的联系：
  13.             ③在初始化的过程中，就必定会调用到我们observe的get方法，因此==在Observe这里把watcher添加到订阅器Dep中==
  14.             ④在compile中我们还会设置对事件的监听(如input事件),执行了对视图中的数据修改->反映到model数据中(调用observer的set方法)
  15.             第四步：Observer通知订阅器Dep，数据值已修改。Dep.notify()通知所有的watcher去更新视图
  17.           */
  19.         //监视者
  20.         /**
  21.          * [observe description]
  22.          * @param  {[type]} obj [vue的data]
  23.          * @param  {[type]} vm  [vue实例]
  24.          * @return {[type]}     [description]
  25.          */
  26.         function observe(obj, vm) {
  27.             Object.keys(obj).forEach(function(key) {
  28.                 defineReactive(vm, key, obj[key]);
  29.             })
  30.         };
  32.         /**
  33.          * [defineReactive description]
  34.          * @param  {[type]} obj [vue实例]
  35.          * @param  {[type]} key [属性名]
  36.          * @param  {[type]} val [属性值]
  37.          * @return {[type]}     [description]
  38.          */
  39.         function defineReactive(obj, key, val) {
  40.             console.log('observe:defineReactive');
  41.             var dep = new Dep();
  42.             console.log(dep);
  43.             //obj:vue实例vm（被操作的目标对象），key要定义or要修改的属性名
  44.             Object.defineProperty(obj, key, {
  45.                 get: function() {
  46.                     console.log('gettttttttt!');
  47.                     console.log(Dep.target);
  48.                     if (Dep.target)
  49.                         dep.addSub(Dep.target)
  50.                     return val;
  51.                 },
  52.                 set: function(newVal) {
  53.                     console.log('set!!!!!!!!!!!!!!!!');
  54.                     if (newVal === val) return;
  55.                     val = newVal;
  56.                     console.log(val);
  57.                     dep.notify();
  58.                 }
  59.             });
  60.         };
  62.         //解析器
  63.         //node：劫持的dom， vm:vue实例
  64.         function compile(node, vm) {
  65.             console.log('compile-----start');
  66.             var reg = /\{\{(.*)\}\}/;
  67.             if (node.nodeType === 1) //元素，查找v-modal绑定的属性值
  68.             {
  69.                 var attr = node.attributes;
  70.                 for (var i = 0; i < attr.length; i++) {
  71.                     if (attr[i].nodeName == 'v-model') {
  72.                         var name = attr[i].nodeValue; //v-model的属性名
  73.                         node.addEventListener('input', function(e) {
  74.                             console.log('检测到值改变：' + e.target.value);
  75.                             vm[name] = e.target.value; //给相应的 data 属性赋值，进而触发该属性的 set 方法
  76.                         });
  77.                         node.value = vm[name]; //把vue对应属性名的值赋给节点,触发get方法,vm.data[name]不会触发get方法，但是vm[name]会触发get方法！！
  78.                         node.removeAttribute('v-model'); //为什么要删除v-model？
  79.                     }
  80.                 }
  81.                 new Watcher(vm, node, name, 'input'); //通知watcher去修改？
  82.             }
  83.             if (node.nodeType === 3) {
  84.                 if (reg.test(node.nodeValue)) {
  85.                     var name = RegExp.$1; // 获取匹配到的字符串
  86.                     name = name.trim();
  88.                     new Watcher(vm, node, name, 'text');
  89.                 }
  90.             }
  91.             console.log('compile-----end');
  92.         }
  94.         //订阅器
  95.         function Dep() {
  96.             this.subs = [];
  97.             console.log('dep');
  98.         }
  100.         Dep.prototype = {
  101.             addSub: function(sub) {
  102.                 console.log('addToDep')
  103.                 this.subs.push(sub);
  104.             },
  105.             notify: function() {
  106.                 this.subs.forEach(function(sub) {
  107.                     sub.update(); //通知watch去update
  108.                 });
  109.             }
  111.         }
  114.         //var vdom = nodeToFragment(document.getElementById('app'));
  115.         //console.log(vdom);
  117.         function nodeToFragment(node, vm) {
  118.             console.log('nodeToFragment---start');
  119.             var flag = document.createDocumentFragment();
  120.             var child;
  121.             //console.log(node.childNodes); // length : 5
  122.             while (child = node.firstChild) {
  123.                 compile(child, vm); //把劫持的child给compile解析
  124.                 flag.appendChild(child);
  125.             }
  126.             //console.log(node.childNodes);  // length : 0 
  127.             console.log('nodeToFragment------end')
  128.             return flag;
  129.         }
  132.         /**
  133.          * [Watcher 订阅者]
  134.          * @param {[type]} vm       [vue实例对象]
  135.          * @param {[type]} node     [含有v指令的节点]
  136.          * @param {[type]} name     [description]
  137.          * @param {[type]} nodeType [description]
  138.          */
  139.         function Watcher(vm, node, name, nodeType) {
  140.             console.log('watcher');
  141.             console.log(this);
  142.             //Dep target是Dep和watcher关联的唯一桥梁
  143.             Dep.target = this;
  144.             /**
  145.              * 关于Dep.target: 是一个全局变量，保存了当前的watcher
  146.              * wathcer构造函数中，为Dep.target赋值后会通过watcher.update()方法去调用observe.get()
  147.              * 在observer.get()方法中就是根据Dep.target来把当前watcher加入到订阅器Dep中
  148.              * 所以在把wathcer加入完Dep后,Dep.target就没有用了，所以在this.update()后面要把Dep.watcher设为null
  149.              */
  150.             this.name = name;
  151.             this.node = node;
  152.             this.vm = vm;
  153.             this.nodeType = nodeType;
  154.             this.update();
  155.             Dep.target = null;
  156.         }
  158.         Watcher.prototype = {
  159.             //更新视图上的值，{{ value }}
  160.             update: function() {
  161.                 this.get();
  162.                 if (this.nodeType == 'text') {
  163.                     this.node.nodeValue = this.value;
  164.                 }
  165.                 if (this.nodeType == 'input') {
  166.                     this.node.value = this.value;
  167.                 }
  168.             },
  169.             // 获取 data 中的属性值
  170.             get: function() {
  171.                 this.value = this.vm[this.name]; // 触发相应属性的 get
  172.             }
  173.         }
  175.         function Vue(options) {
  176.             console.log(this); //this是指向实例对象
  177.             this.data = options.data;
  178.             var data = this.data;
  179.             observe(data, this); //第一步 监听vue的实例vm中data的所有属性
  180.             var id = options.el;
  181.             var dom = nodeToFragment(document.getElementById(id), this);//第二部 数据劫持做处理
  182.             document.getElementById(id).appendChild(dom);//第三部 绑定到节点树
  183.         }
  185.         var vm = new Vue({
  186.             el: 'app',
  187.             data: {
  188.                 text: 'hello world'
  189.             }
  190.         })

DOME下载

vue原理解析代码.rar