Vue 绑定简单分析实现

const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
const arrayAugmentations = [];

aryMethods.forEach((method)=> {

    // 这里是原生Array的原型方法
    let original = Array.prototype[method];

   // 将push, pop等封装好的方法定义在对象arrayAugmentations的属性上
   // 注意：是属性而非原型属性
    arrayAugmentations[method] = function () {
        //触发事件，分发给watcher

        // 调用对应的原生方法并返回结果
        return original.apply(this, arguments);
    };

});

    //接下来需要实现_obserse函数，对data进行处理，重写data的set和get函数
    myVue.prototype._obverse=function (obj) {
        // body...
        var value;
        for (key in obj) {  //遍历对象。给每个对象添加监听事件
            if (obj.hasOwnProperty(key)) {  //如果有这个属性
                //为这个属性添加这个指令监听者
                this._binding[key]={
                    _directives:[]
                }

                value=obj[key]
                if (typeof value === 'object') {    //如果这个值还是对象，则继续处理
                    this._obverse(value)
                }

                var binding =this._binding[key]
                //定义Property，一直以来说的关键！！！
                Object.defineProperty(this.$data,key,{
                    enumerable:true,
                    configurable:true,
                    //定义get方法。
                    get:function () {
                        console.log(`获取${value}`)
                        return value;
                    },
                    set:function (newVal) {
                        // body...
                        console.log(`更新${newVal}`)
                        if (value!==newVal) {
                            value=newVal;
                            //如果更新了数据了，就分发给监听者，同时改变数据
                            binding._directives.forEach(function(item){
                                item.update()
                            })
                        }
                    }

                })
            }
        }
    }

//写一个指令集Watcher,用来绑定更新函数，实现对Dom元素的更新
function Watcher(name,el,vm,exp,attr) {
        //指令的名称。
        this.name = name;   
        //指令对应的DOM元素
        this.el = el;
        //执行所属于的myVue实例
        this.vm=vm;
        //指令对应的值，
        this.exp=exp;
        //绑定的属性值。
        this.attr=attr;
              
                //这里的update其实是事件响应的方法。最后再来看
        this.update();
        // body...
}

    //3.创建指令的编译器
    myVue.prototype._compile = function(root) { 
        //root为id为app的Element元素。也就是我们的根元素
        var _this = this
        var nodes = root.children
        //取出每个子节点。如果有子节点。则继续递归。并进行处理
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i]
            this._compile(node)
        

            //如果有v-on，则进行点击事件的监听
            if (node.hasAttribute('v-on')) {
                node.onclick=(function () {
                //这里使用i。就马上调用，就不会出现问题。
                var attrVal = nodes[i].getAttribute('v-on')
                //bind是使用data的作用域与method函数的作用域保持一致
                return _this.$methods[attrVal].bind(_this.$data)
                })();
            }

            //继续，解析其他的
            //v-model只能绑定 input
            if (node.hasAttribute('v-model') && (node.tagName=='INPUT' || node.tagName=='TEXTAREA')) {

                node.addEventListener('input',(function (key) {
                    var attrVal=node.getAttribute('v-model')
                    //如果是v-model就为属性值添加一个watcher
                    _this._binding[attrVal]._directives.push(new Watcher(
                        'input',
                        node,
                        _this,
                        attrVal,
                        'value'
                    ))

                    return function () {
                    //将data内的值，给成这里写的值。实现双向绑定
                    _this.$data[attrVal] =nodes[key].value
                    }
                })(i))

            }

            //继续v-bind
            if (node.hasAttribute('v-bind')) {
            var attrVal = node.getAttribute('v-bind')
            _this._binding[attrVal]._directives.push(new Watcher(
                'text',
                node,
                _this,
                attrVal,
                'innerHTML'
                ))
            }
        }
    };

    Watcher.prototype.update = function() {
        // body...
        this.el[this.attr]=this.vm.$data[this.exp]
    };

    if (node.hasAttribute('v-on')) {
                node.onclick=(function () {
                //这里使用i。就马上调用，就不会出现问题。
                var attrVal = nodes[i].getAttribute('v-on')
                //bind是使用data的作用域与method函数的作用域保持一致
                return _this.$methods[attrVal].bind(_this.$data)
                })();
            }

//自定义myVue函数
    function myVue(options){
        //添加一个init属性
        this._init(options)
    }
    //第一个版本。简单的init函数
    myVue.prototype._init = function(options) {
        //为上面使用时传入的结构体。包括el.data.methods
        this.$options=options;//options
        //el是#app,this.$el是id为app的element元素 
        this.$el=document.querySelector(options.el);
        this.$data=options.data;
        this.$methods=options.methods;

        //_binding 保持这model和view之间的映射关系，也就算我们之前定义的
        //wathcer.当model改变时，我们会触发其中的指令类更新，保证view也能实时更新
        this._binding ={}

        //需要调用自己的observable方法来监听data
        this._obverse(this.$data)
        this._compile(this.$el);
    };