Vue0.1版本源码解读一下下（2）

之前看了大佬的Vue源码的0.1版本的解读，前文分析这里回来继续进行分析，今天主要分析的是Compile、事件怎么进行处理，怎么进行更新？

Compile，上文提到了解析页面上一些数据和指令，今天我们来细细的看一下怎么实现？

其实里面涉及的东西还很多的，我们需要了解其中一些啥？可能涉及DOM的一些知识。我们一步步配合着断点来进行解析，部分解析内容直接写在下面的代码里面了。

总结几点：指令解析（正则）、文本解析（nodeType）、元素解析（nodeType）

// 指令解析器
// Compile构造函数
export default function Compile(vm) {
    this.el = vm.$el
    this.vm = vm
    // 正则 对下面元素的name进行匹配
    this.onRe = /^(v-on:|@)/
    this.modelRe = /^v-model/
    this.bindRe = /^(v-bind:|:)/
    this.braceRe1 = /{{\w+}}/g
    this.braceRe2 = /[{}]/g
    // 用于存放指令的一些方法
    this.dirs = []
    // 指令的处理
    this.handles = handles
    // 初始化
    this.init()
}

Compile.prototype = {
    init() {
        // 解析元素
        this.parse(this.el)
        //进行渲染
        this.render()
    },
   // 我们一起来看一下parse做了啥？一步步解析，看代码主要打断点。首先默认parse传入了el，默认肯定就是挂载的根节点。然后继续往下看
    parse(el) {
        // 拿到元素的属性，这里有啥用呢？请看下图1.1 拿到的是这个节点的属性
        const attrs = el.attributes
        let name
        // 属性进行遍历 然后做了三个判断，分别对监听、绑定、model进行解析，然后分别放入addDir里面，
       // 里面的逻辑基本就是很简单了，我们通过断点进行看一下，下图1.2 当然整个过程是递归的过程，一直往下查找自己的childNodes，然后进行。
        [...attrs].forEach(e => {
            if (this.onRe.test(e.name)) {
                name = e.name.replace(this.onRe, '')
                // 比如我在页面上年龄加了一个click=“” 然后最终name就是click ，处理函数就是handle.on监听 e.value就是属性的值 el就是当前元素 ，没事后面我会对这个进行解读
                this.addDir(this.handles.on, name, e.name, e.value, el)
            } else if (this.bindRe.test(e.name)) {
                // 类似:bind="name" 解析完后将原本的值删掉
                el.removeAttribute(e.name.split('=')[0])
                name = e.name.replace(this.bindRe, '')
                this.addDir(this.handles.bind, name, e.name, e.value, el)
            } else if (this.modelRe.test(e.name)) {
                name = e.name.replace(this.modelRe, '')
                this.addDir(this.handles.model, name, e.name, e.value, el)
            }
        })
        // 遍历子节点
        const children = el.childNodes
        if (children.length > 0) {
            // children 主要就分成两块了这里分别处理的是两种类型的节点 通过元素的nodeType,具体的链接上面已经给出。是元素节点的继续解析，文本节点的话，则进行判断值，看看其有没有引入变量，有的话就添加到顶层元素的_textNodes
            children.forEach(ele => {
                switch (ele.nodeType) {
                    // 元素节点
                    case 1:
                        this.parse(ele)
                        break
                    // 文本节点
                    case 3:
                        if (this.braceRe1.test(ele.nodeValue)) {
                            this.vm._textNodes.push(ele)
                        }
                        break
                }
            })
        }
    },

    addDir(handle, dirName, name, value, el) {
        this.dirs.push({
            vm: this.vm,
            dirName,
            handle,
            rawName: name,
            expOrFn: value,
            el
        })
    },
    // 这里我们继续来看render，这个就是比较简单的了 主要对handle进行具体实现。然后有一个handle.js我们具体看看。
    render() {
        const vm = this.vm
        const that = this
        this.dirs.forEach(e => {
            const handle = e.handle
            if (handle.implement) {
                handle.implement(e.vm, e.el, e.dirName, e.expOrFn)
            }
            const update = function (newVal, oldVal) {
                handle.update(e.vm, e.el, e.expOrFn, newVal, oldVal)
            }
            // 在这里开始创建观察者实例 将监听的值变化时 触发update回调函数
            new Watcher(this.vm, e.expOrFn, update)
        })
        const handles = this.handles.textNode

        vm._textNodes.forEach(e => {
            let arry = e.nodeValue.match(this.braceRe1)
            let rawValue = e.nodeValue
            arry.forEach(str => {
                let variable = str.replace(this.braceRe2, '')
                handles.implement(vm, e, variable)
                const update = function (newVal, oldVal) {
                    handles.update(vm, newVal, oldVal, e, variable, rawValue, that.braceRe1, that.braceRe2)
                }
                // 监听文本节点 在这里开始创建观察者实例 将监听的值变化时 触发update回调函数
                new Watcher(vm, variable, update)
            })
        })
    }
}
// 举例来说 参数传入的是name el vm expOrFn 比如页面里面用到了click 就是事件监听嘛，然后这里就是做了就是元素的事件绑定 怎么绑定的呢。简单expOrFn是解析出属性对应的值，然后vm上挂在了方法 然后指向
on: {
        implement(vm, el, name, expOrFn) {
            el['on' + name] = vm[expOrFn].bind(vm)
        },
        update(vm, el, expOrFn, newVal, oldVal) {

        }
    },

image-20210509215905529

image-20210509221504589

是不是好奇事件怎么进行处理？

上面代码里面已经解析了部分，其实一开始我也不知道，寻思着全局搜一下addEventListener，结果没搜到很失望。然后就细细看，这里模拟了一下，这里主要就是用了下面这样的方式。具体的上面已经说了。
```
 on: {
        implement(vm, el, name, expOrFn) {
            el['on' + name] = vm[expOrFn].bind(vm)
        },
        update(vm, el, expOrFn, newVal, oldVal) {

        }
  },
document.querySelector('.test')['onclick'] = function(){

}
document.querySelector('.test').onclick =  = function(){

}
```

如何进行数据更新

上文中提到了如何让数据进行了搜集，然后现在看一下怎么进行依赖的更新

1. observer 里面在set里面作了一层拦截，数据发生改变的时候，做出了触发更新 dep.notify()的操作
      set(newVal) {
            if (val === newVal) {
                return
            }
            val = newVal
            // 如果新值是对象 递归监听
            if (typeof val === 'object') {
                new Observer(val)
            }
            // 触发更新
            dep.notify()
        }


2. dep 里面的更新操作主要就是有一个收集依赖的数组，然后对其进行遍历，里面其实都是观察者的实例， 触发更新函数，下面每一个回调的e即是观察者实例。执行了update，其实就是执行了下面的run函数。
     notify() {
         this.subs.forEach(e => {
             e.update()
         })
     }


     update() {
        this.run()
    },

     run() {
        // 触发更新后执行回调函数
        const value = this.get()
        const oldValue = this.value

        if (value !== oldValue) {
            this.cb.call(this.vm, value, oldValue)
        }
        this.value = value
    },

image-20210510105032008

Vue0.1版本源码解读一下下（2）

Compile，上文提到了解析页面上一些数据和指令，今天我们来细细的看一下怎么实现？

是不是好奇事件怎么进行处理？

如何进行数据更新