vue源码初级解析（数据代理、模板解析、数据绑定、双向绑定）

向右看齐 2022-04-03 05:36 263阅读 0赞

一、数据代理  
实现数据代理核心就是 Object.defineProperty()方法，而IE8及以下是不支持该方法的，所以vue不能用在IE8及以下。  
回归正题，[data里的属性可以直接vm.xxx][data_vm.xxx]，那是因为用defineProperty方法将data中的属性增加到vm上了，主要代码如下：

Object.keys(data).forEach(function (key) {
       var me = this;
       Object.defineProperty(me, key, {
          configurable: false,
          enumerable: true,
          //vm.xxx获取属性值时调用该方法
          get: function proxyGetter() {
             return me.data[key];
          },
          //当监听到vm.xxx属性值发生改变时，同时更新data中的属性值
          set: function proxySetter(newVal) {
             me.data[key] = newVal;
          }
       })
    })

二、模板解析  
模板解析用到了DocumentFragment

*  将原生节点拷贝到fragment中
 *  对含有大括号的文本节点、指令层层处理
 *  将处理完的fragment添加回页面，渲染完成

初始化：

//事件处理（解析事件指令）
    eventHandler: function(node, vm, exp, dir) {
       var eventType = dir.split(':')[1],
             fn = vm.$options.methods && vm.$options.methods[exp];
         if(eventType && fn) {
            node.addEventListener(eventType, fn.bind(vm), false);
         }
    }
    //根据属性名获取data中的值（解析普通指令及大括号表达式）
    _getVal: function(vm, exp) {
       var val = vm._data;
       exp = exp.split('.');
       exp.forEach(function(k) {
          val = val[k];
       })
       return val;
    }
    //更新节点，以v-text也是{
       {}}为例
    textUpdater: function (node, value) {
       node.textContent = typeof(value) == 'undefined' ? '' : value;
    }

三、数据绑定  
数据绑定通过数据劫持的方式来更新页面  
首先看下面一张图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]  
如何进行数据劫持：  
利用Object.defineProperty方法将data中的属性重新配置，加上getter和setter方法

Object.defineProperty(data, key, {
                enumerable: true, // 可枚举
                configurable: false, // 不能再define
                get: function() {
                    if (Dep.target) {
                        dep.depend();
                    }
                    return val;
                },
                set: function(newVal) {
                    if (newVal === val) {
                        return;
                    }
                    val = newVal;
                    // 新的值是object的话，进行监听
                    childObj = observe(newVal);
                    // 通知订阅者
                    dep.notify();
                }
     });

Dep是一个构造函数，每一个属性对应一个dep，数据劫持时创建实例

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

watcher也是一个构造函数，每一个表达式对应一个watcher，监视数据变化来更新页面

function Watcher(vm, exp, cb) {
        this.cb = cb;
        this.vm = vm;
        this.exp = exp;
        this.depIds = {};
        this.value = this.get();
    }

模板解析时每次创建watcher对象，都会去获取data的属性值，这样会触发getter中的dep.depend();，继而会触发addDep方法

addDep: function(dep) {
            if (!this.depIds.hasOwnProperty(dep.id)) {
                dep.addSub(this);  //属性值改变时，dep会通知订阅者watcher
                this.depIds[dep.id] = dep;   //这句话加上if条件判断主要是为了防止属性值改变时重复建立联系，只允许初始化的时候建立联系
            }
        }

这样dep和watcher就建立起了联系

举个例子：

<div id="app">
       <p>{
       {name}}</p>
       <p v-text="name"></p>
       <p>{
       {frends.age}}</p>
       <button v-on:click="update">更新</button>
    </div>
    new Mvvm ({
       data:{
          name: 'xiaoming',
          frends: {
             name: 'xiaohong',
             age: 18
          }
       },
       methods: {
          update () {
             this.name = 'xinxin';
             this.frends.age = 20;
          }
       }
    })

数据劫持时创建的Dep实例有：

{id: 0, sub[]}  {id: 1, sub[]}  {id: 2, sub[]}  {id: 3, sub[]}

初始化视图模板解析时，每创建一个watcher实例，都要和dep建立联系：

//watcher<0>加尖括号是为了区分每次创建的watcher实例
    第一个<p>{
       {name}}</p>：
    name属性对应的dep={id:0, sub[watcher<0>]}
    watcher<0>.depIds={0: {id:0, sub[watcher<0>]}}
    
    第二个<p v-text="name"></p>
    name属性对应的dep={id:0, sub[watcher<0>, watcher<1>]}
    watcher<1>.depIds={0: {id:0, sub[watcher<0>, watcher<1>]}}
    
    第三个<p>{
       {frends.age}}</p>
    frends属性对应的dep={id:1, sub[watcher<2>]}
    watcher<2>.depIds={1: {id:1, sub[watcher<2>]}}
    age属性对应的dep={id:3, sub[watcher<2>]}
    watcher<2>.depIds={1: {id:1, sub[watcher<2>]}, 3: {id:3, sub[watcher<2>]}}

当name属性变化时->setter会被调用->通知dep->调用watcher里的更新页面的方法->getter方法会被调用->通过watcher的depIds属性防止重复创建联系

四、双向绑定  
双向绑定中的一个方向model–>view的绑定就是上面说的模板解析，另一个方向就是绑定input事件，监听到input标签value值变化，则更新data，然后更新页面

model: function (node, vm, exp) {
       var me = this;
       var val = this._getVMVal(vm, exp);
       node,addEventListener('input', function (e) {
          var newValue = e.target.value;
          if(val === newValue) {
             return;
          }
          me._setVMVal(vm, exp, newValue);
          val = newValue;
       })
       
    }
    _setVMVal: function(vm, exp, value) {
       var val = vm._data;
            exp = exp.split('.');
            exp.forEach(function(k, i) {
                // 非最后一个key，更新val的值
                if (i < exp.length - 1) {
                    val = val[k];
                } else {
                    val[k] = value;
                }
            });
    }

[data_vm.xxx]: http://xn--datavm-6x8i375af7s4uib3jh62dzgbw53s.xxx
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220403/699b5016036844b9aa014f5955681055.png