Vue源码探究笔记

对于源代码分析有一个基本原则:要找到它的最早期的版本,比如1.0版本。1.0版本奠定了一款框架的基础结构,之后的版本迭代都是基于这套结构进行更新的。所以掌握了基础结构,那也就掌握了这个框架。这个原则适用于世界上绝大多数事务:

  • 计算机基本组成结构
  • 汽车等各类交通工具的基本结构
  • Android等框架类的基本结构

所以基于以上原则,我在分析Vue源代码时采用的是它的0.10版本,这是我能找到的最早的、也能顺利运行的版本。

执行以下命令便可以得到0.10版本:

	git clone https://github.com/vuejs/vue.git
	git checkout 0.10

之后便可以通过顺手的IDE工具比如VS Code将这个项目加载,开始正式进入我们的解析过程。

本篇文章的目的

读完这篇文章,你可以学到以下内容:

  • Vue对于JS文件的解析。
  • Vue对于DOM树的解析。
  • 简单的TEXT赋值更新事件的整个执行过程。

引用结构图

一切从这张图开始:在这里插入图片描述
上面这张图描述了Vue各个部分的引用关系,它有助于我们梳理Vue的主体结构。
从上图中我们可以确认,compiler应当是Vue的核心部分。

分析所需要的环境

一切从我们熟悉的Vue用法开始说起,以下内容是摘自于项目中的./examples/commits文件夹:

// app.js
var demo = new Vue({

    el: '#demo',

    data: {
        branch: 'master', title: 'tl'
    },

    created: function () {
        this.$watch('branch', function () {
            this.fetchData()
        })
    },

    filters: {
        truncate: function (v) {
            var newline = v.indexOf('\n')
            return newline > 0 ? v.slice(0, newline) : v
        },
        formatDate: function (v) {
            return v.replace(/T|Z/g, ' ')
        }
    },

    methods: {
        fetchData: function () {
            var xhr = new XMLHttpRequest(),
                self = this
            xhr.open('GET', 'https://api.github.com/repos/yyx990803/vue/commits?per_page=3&sha=' + self.branch)
            xhr.onload = function () {
                self.commits = JSON.parse(xhr.responseText)
            }
            xhr.send()
        }
    }
})
<!-- index.html -->
<!DOCTYPE html>

<style>
    #demo {
        font-family: 'Helvetica', Arial, sans-serif;
    }
    a {
        text-decoration: none;
        color: #f66;
    }
    li {
        line-height: 1.5em;
        margin-bottom: 20px;
    }
    .author, .date {
        font-weight: bold;
    }
</style>

<div id="demo">
    <h1>Latest Vue.js Commits</h1>
    <p>
        {{title}}
    </p>
    <input type="radio" id="master" name="branch" v-model="branch" value="master">
    <label for="master">master</label>
    <br>
    <input type="radio" id="dev" name="branch" v-model="branch" value="dev">
    <label for="dev">dev</label>
    <ul>
        <li v-repeat="commits">
            <a href="{{html_url}}" target="_blank" class="commit">{{sha.slice(0, 7)}}</a>
            - <span class="message">{{commit.message | truncate}}</span><br>
            by <span class="author">{{commit.author.name}}</span>
            at <span class="date">{{commit.author.date | formatDate}}</span>
        </li>
    </ul>
</div>

<script src="../../dist/vue.js"></script>
<script src="app.js"></script>

典型的Vue用法如上,那我们的分析就从new Vue()开始说起。

*注意:
如果要达到良好的学习效果,需要自己clone一份源代码,跟着查看,反复查看。
为了节省篇幅,不影响主流程的代码都以“…”代替。
不是核心的代码,会直接略过。

Vue的入口

我们可以在Vue的源代码中找到:

    if (typeof exports == 'object') {
        module.exports = require('vue');
    } else if (typeof define == 'function' && define.amd) {
        define(function () { return require('vue'); });
    } else {
        window['Vue'] = require('vue');
    }

那也就是说我们在new Vue时,调用的构造方法应当是require('vue');方法所返回的。
经过一轮探寻(这个过程可自行探寻,这不是我们的关注的重点),可以找到Vue实际的入口为vue/src/main.js方法中所返回的内容:

    require.register("vue/src/main.js", function (exports, require, module) {
        var config = require('./config');
        var ViewModel = require('./viewmodel');
		...
        module.exports = ViewModel
    });

所以我们真正的入口便是ViewModel的构造方法。

真正的入口ViewModel()

数据的执行入口:

         /**
         *  ViewModel exposed to the user that holds data,
         *  computed properties, event handlers
         *  and a few reserved methods
         */
        function ViewModel(options) {
            //对外暴露的入口
            console.info(options);
            // compile if options passed, if false return. options are passed directly to compiler
            if (options === false) return
            new Compiler(this, options)
        }

而后开始进入Compiler构造方法:

        /**
         *  The DOM compiler
         *  scans a DOM node and compile bindings for a ViewModel
         * 	options: custom data.
         */
        function Compiler(vm, options) {
        	...
        }

最开始processOptions内部会对自定义的四种类型做初步处理:components,partials,template,filters,我们没有定义,也不是核心流程,直接跳过。

			/**
             *  convert certain option values to the desired format.
             */
			processOptions:(options);

接下来将自定义编译选项与主编译器合并:

            // copy compiler options
            extend(compiler, options.compilerOptions);

通过setupElement方法查找el所定义的元素,其内部使用了document.querySelector()方法,参数为id选择器的值#demo

            // initialize element
            var el = compiler.el = compiler.setupElement(options);

这里的el就代表了整个根节点。接下来的操作都围绕着这个根节点进行操作。

接下来给compiler添加了一些属性,这些属性为接下来做铺垫:

            // set other compiler properties
            compiler.vm = el.vue_vm = vm
            compiler.bindings = utils.hash()
            compiler.dirs = []
            compiler.deferred = []
            compiler.computed = []
            compiler.children = []
            compiler.emitter = new Emitter(vm)

上面给el赋了一个属性:el.vue_vm
vue_vm拥有以下属性:

            vm.$ = {}
            vm.$el = el
            vm.$options = options
            vm.$compiler = compiler
            vm.$event = null
            vm.$root = getRoot(compiler).vm

其中这些为循环引用,需要注意:

	vue_vm.el = vm.el = el
	compiler.options = vm.$options = options
	vm.$compiler = compiler,而compiler.vm = el.vue_vm = vm

接下来我们需要进入compiler.setupObserver()方法一探究竟,这是个关键的地方。

        CompilerProto.setupObserver = function () {
            var compiler = this,
                bindings = compiler.bindings,
                options = compiler.options,
                observer = compiler.observer = new Emitter(compiler.vm)
            ...

            // add own listeners which trigger binding updates
            observer
                .on('get', onGet)
                .on('set', onSet)
                .on('mutate', onSet)

            // register hooks
            // 对自定义的钩子方法做处理
            hooks = [
                'created', 'ready',
                'beforeDestroy', 'afterDestroy',
                'attached', 'detached'
            ]
            var i = hooks.length, j, hook, fns
            while (i--) {
                hook = hooks[i]
                fns = options[hook]
                if (Array.isArray(fns)) {
                    j = fns.length
                    // since hooks were merged with child at head,
                    // we loop reversely.
                    while (j--) {
                        registerHook(hook, fns[j])
                    }
                } else if (fns) {
                    registerHook(hook, fns)
                }
            }

            // broadcast attached/detached hooks
            observer
                .on('hook:attached', function () {
                    broadcast(1)
                })
                .on('hook:detached', function () {
                    broadcast(0)
                })

            function onGet(key) {
                check(key)
                DepsParser.catcher.emit('get', bindings[key])
            }

            function onSet(key, val, mutation) {
                observer.emit('change:' + key, val, mutation)
                check(key)
                bindings[key].update(val)
            }

            function registerHook(hook, fn) {
                observer.on('hook:' + hook, function () {
                    fn.call(compiler.vm)
                })
            }

            function broadcast(event) {
                ...
            }
           ...
        }

上面做了这么几件重要的事情:

  • compiler.observer初始化,其中compiler.observer是一个Emitter对象的实例。
  • compiler.observer注册需要观察的事件,需要观察的事件包含:get、set、mutate、hook:attached、hook:detached。其中后两项会在事件被触发时,将事件广播出去。
  • 将自定义生命周期方法与生命周期事件挂钩。

observer.on方法实现如下,它用来注册事件与回调的关系。是一对多的关系。

        EmitterProto.on = function (event, fn) {
            this._cbs = this._cbs || {};
            (this._cbs[event] = this._cbs[event] || [])
                    .push(fn)
            return this
        }

通过setupObserver方法的执行,我们可知如下对应关系:

compiler.observer._cbs.get = ['onGet']
compiler.observer._cbs.set = ['onSet']
compiler.observer._cbs.mutate = ['onSet']
compiler.observer._cbs.hook:attached = ['broadcast function']
compiler.observer._cbs.hook:detached = ['broadcast function']
...
自定义生命周期观察者,如果有的话

以上对分析最重要的就是onSet的回调,在这里先有个印象,后面很关键。onSet实现如下:

            function onSet(key, val, mutation) {
                observer.emit('change:' + key, val, mutation)
                check(key)
                bindings[key].update(val)
            }

到这里跳出setupObserver方法,回到Compiler(vm, options)构造方法内继续往下:

接下来对自定义方法处理,我们的示例中有自定义方法fetchData

            // create bindings for computed properties
            if (options.methods) {
                for (key in options.methods) {
                    compiler.createBinding(key)
                }
            }

内部实现如下:

        CompilerProto.createBinding = function (key, directive) {
            ...
            var compiler = this,
                methods = compiler.options.methods,
                isExp = directive && directive.isExp,
                isFn = (directive && directive.isFn) || (methods && methods[key]),
                bindings = compiler.bindings,
                computed = compiler.options.computed,
                binding = new Binding(compiler, key, isExp, isFn)

            if (isExp) {
                ...
            } else if (isFn) {
                bindings[key] = binding
                compiler.defineVmProp(key, binding, methods[key])
            } else {
                bindings[key] = binding
                ...
            }
            return binding
        }

这里的key是fetchData,它是一个方法,所以isFn = true。然后将这些关键的信息生成了一个Binding对象。Binding通过类似的建造者模式将所有的关键信息维护在一起。现在这个binding对象是专门为fetchData方法所产生的。

然后代码进入isFn条件继续执行,便产生了如下关系:

compiler.bindings.fetchData = new Binding(compiler, 'fetchData', false, true); 

然后继续执行:

compiler.defineVmProp('fetchData', binding, fetchDataFunc);//fetchDataFunc为fetchData所对应的自定义方法。

方法内部如下:

       CompilerProto.defineVmProp = function (key, binding, value) {
           var ob = this.observer
           binding.value = value
           def(this.vm, key, {
               get: function () {
                   if (Observer.shouldGet) ob.emit('get', key)
                   return binding.value
               },
               set: function (val) {
                   ob.emit('set', key, val)
               }
           })
       }

经过 defineVmProp代码的执行,可以得出以下结论:

compiler.vm.fetchData有了代理get/set方法,后期对于自定义方法的读取或者赋值都需要经过这一层代理。binding.value也指向了用户自定义的方法。当读取vm.fetchData时就会得到自定义的方法。

我们跳出defineVmProp方法,然后继续向下执行,createBinding方法执行完毕,我们返回到createBinding方法调用处,也就是Compiler的构造方内,继续向下执行。

我们的示例中没有computed的相关定义,这里跳过。

接下来对defaultData做处理,我们没有定义,跳过。

也没有对paramAttributes的定义,跳过。

走到这里:

    // copy data properties to vm
    // so user can access them in the created hook
    extend(vm, data)
    vm.$data = data

这里将data里面的属性全部赋值给了vm。并且vm.$data属性也指向data。

	// extend方法的实现如下:
    extend: function (obj, ext) {
        for (var key in ext) {
            if (obj[key] !== ext[key]) {
                obj[key] = ext[key]
            }
        }
        return obj
    }

extend方法将第二个参数的所有属性全部赋值给了第一个参数。对于示例会产生如下关系:

vm.branch = 'master'
vm.title = 'tl'
vm.$data = data

接着向下,触发created生命周期方法:

    // beforeCompile hook
    compiler.execHook('created')

我们没有定义created生命周期方法,然后继续。

对于自定义数据的事件监听

略过中间的数据处理,到达这里:

    // now we can observe the data.
    // this will convert data properties to getter/setters
    // and emit the first batch of set events, which will
    // in turn create the corresponding bindings.
    compiler.observeData(data)

observeData方法内部如下:

        CompilerProto.observeData = function (data) {

            var compiler = this,
                observer = compiler.observer

            // recursively observe nested properties
            Observer.observe(data, '', observer)
            
			...
        }

observeData方法中比较重要的地方是:

    Observer.observe(data, '', observer)

然后是observe方法内部:

	...
	// 第一次执行alreadyConverted = false
    if (alreadyConverted) {
        // for objects that have already been converted,
        // emit set events for everything inside
        emitSet(obj)
    } else {
        watch(obj)
    }

所以第一次走的是watch方法:

/**
 *  Watch target based on its type
 */
function watch (obj) {
    if (isArray(obj)) {
        watchArray(obj)
    } else {
        watchObject(obj)
    }
}

watch方法对对象做了一个初步的分拣。示例的代码不是Array,走watchObject:

/**
 *  Watch an Object, recursive.
 */
function watchObject (obj) {
	// 用户给对象添加$add/$delete两个属性
    augment(obj, ObjProxy)
    for (var key in obj) {
        convertKey(obj, key)
    }
}

我们到这里稍微等一下,这里的obj还是:

    data: {
        branch: 'master', 
        title: 'tl'
    }

watchObject对对象的每个属性进行遍历,而convertKey方法内做了比较重要的事情:

        function convertKey(obj, key, propagate) {
            var keyPrefix = key.charAt(0)
            // 初步对以$开头的、以_开头的做过滤
            if (keyPrefix === '$' || keyPrefix === '_') {
                return
            }
            ...
			// 重要之所在
            oDef(obj, key, {
                enumerable: true,
                configurable: true,
                get: function () {
                    var value = values[key]
                    // only emit get on tip values
                    if (pub.shouldGet) {
                        emitter.emit('get', key)
                    }
                    return value
                },
                set: function (newVal) {
                    var oldVal = values[key]
                    unobserve(oldVal, key, emitter)
                    copyPaths(newVal, oldVal)
                    // an immediate property should notify its parent
                    // to emit set for itself too
                    init(newVal, true)
                }
            })

            ...
        }

convertKey方法中比较重要的就是这里了,这里对new Vue()时传入的对象的data对象中的每个属性添加相应的get/set方法,也就是说在给某个属性赋值时,就会触发这里。如果给branch/title赋予新值,就会触发上面提到的set方法。到这里我们有理由相信,set方法中的init方法是用来更新界面的。

好了,到了这里convertKey方法就分析完了,我们再一路往回:convertKey -> watchObject -> watch -> observe -> observeData。回到observeData方法内,接下的代码是对compiler.vm.$data添加观察事件,它暂时不是我们关心的内容,observeData返回调用处,并接着向下:

            // before compiling, resolve content insertion points
            if (options.template) {
                this.resolveContent()
            }

上面这段代码我们没有定义template,略过。

对于DOM树的解析

向下到了又一个很关键的地方:

            // now parse the DOM and bind directives.
            // During this stage, we will also create bindings for
            // encountered keypaths that don't have a binding yet.
            compiler.compile(el, true)

compile内部实现:

        CompilerProto.compile = function (node, root) {
            var nodeType = node.nodeType
            if (nodeType === 1 && node.tagName !== 'SCRIPT') { // a normal node
                this.compileElement(node, root)
            } else if (nodeType === 3 && config.interpolate) {
                this.compileTextNode(node)
            }
        }

执行到这里el使我们的根节点demo,其中node = demoNode, root = true。上面的分发会进入compileElement

        CompilerProto.compileElement = function (node, root) {

            // textarea is pretty annoying
            // because its value creates childNodes which
            // we don't want to compile.
            if (node.tagName === 'TEXTAREA' && node.value) {
                node.value = this.eval(node.value)
            }

            // only compile if this element has attributes
            // or its tagName contains a hyphen (which means it could
            // potentially be a custom element)
            if (node.hasAttributes() || node.tagName.indexOf('-') > -1) {
                ...

            }

            // recursively compile childNodes
            if (node.hasChildNodes()) {
                slice.call(node.childNodes).forEach(this.compile, this)
            }
        }

compileElement方法内部细节比较多也比较长。

先来说说compileElement方法的作用,compileElement方法用来对dom树的所有节点进行遍历,会处理所有的属性节点与文本节点。其中就会遇到v-model等指令以及{{value}}这样的占位符。

compileElement方法内分为几大块:

  • 1.对TEXTAREA的处理:if (node.tagName === 'TEXTAREA' && node.value)
  • 2.对用于属性的或者tag的名称中包含’-'的处理:if (node.hasAttributes() || node.tagName.indexOf('-') > -1) {
  • 3.如果不符合1或2的条件,则对其子节点进行处理。

子节点的处理会进一步进行递归,走compile方法。compile方法继续进行分发,如果是元素节点则走compileElement,如果是文本节点,则走compileTextNode。这个过程直到将整颗DOM树遍历完毕。

        CompilerProto.compile = function (node, root) {
            var nodeType = node.nodeType
            if (nodeType === 1 && node.tagName !== 'SCRIPT') { // a normal node
                this.compileElement(node, root)
            } else if (nodeType === 3 && config.interpolate) {
                this.compileTextNode(node)
            }
        }

以下代码从index.html摘除,它有利于我们的继续分析:

    <p>
        {{title}}
    </p>

如果渲染以上内容,那么它的处理就会被分发到compileTextNode方法中:

        CompilerProto.compileTextNode = function (node) {

            var tokens = TextParser.parse(node.nodeValue)
            if (!tokens) return
            var el, token, directive

            for (var i = 0, l = tokens.length; i < l; i++) {

                token = tokens[i]
                directive = null

                if (token.key) { // a binding
                    if (token.key.charAt(0) === '>') { // a partial
                        el = document.createComment('ref')
                        directive = this.parseDirective('partial', token.key.slice(1), el)
                    } else {
                        if (!token.html) { 
                            // text binding
                            // 示例中,会在这里处理{{title}}的逻辑,并绑定与之对应的directive处理函数。
                            el = document.createTextNode('')
                            directive = this.parseDirective('text', token.key, el)
                        } else { // html binding
                            el = document.createComment(config.prefix + '-html')
                            directive = this.parseDirective('html', token.key, el)
                        }
                    }
                } else { // a plain string
                    el = document.createTextNode(token)
                }

                // insert node
                node.parentNode.insertBefore(el, node)
                // bind directive
                this.bindDirective(directive)

            }
            node.parentNode.removeChild(node)
        }

上面方法中的TextParser.parse(node.nodeValue)的实现细节不去了解了,它是用来匹配各种占位符和表达式的,纯算法型代码。
对于<p>{{title}}</p>这种类型的处理会进入:

el = document.createTextNode('')
directive = this.parseDirective('text', token.key, el)

其中token.key = ‘title’, el为刚刚创建好的新文本节点。parseDirective方法内:

        CompilerProto.parseDirective = function (name, value, el, multiple) {
            var compiler = this,
                definition = compiler.getOption('directives', name)
            if (definition) {
                // parse into AST-like objects
                var asts = Directive.parse(value)
                return multiple
                    ? asts.map(build)
                    : build(asts[0])
            }
            function build(ast) {
                return new Directive(name, ast, definition, compiler, el)
            }
        }

上面代码最为核心的调用是getOption,其中type = ‘directives’, id = ‘text’, silent = undefined:

        CompilerProto.getOption = function (type, id, silent) {
            var opts = this.options,
                parent = this.parent,
                globalAssets = config.globalAssets,
                res = (opts[type] && opts[type][id]) || (
                    parent
                        ? parent.getOption(type, id, silent)
                        : globalAssets[type] && globalAssets[type][id]
                )
            if (!res && !silent && typeof id === 'string') {
                utils.warn('Unknown ' + type.slice(0, -1) + ': ' + id)
            }
            return res
        }

其中globalAssets存储了vue所支持类型的所有对应关系:
在这里插入图片描述

然后getOption返回的就是处理类型与处理方法的对应关系对象。最后parseDirective方法返回一个新的Directive对象。这个对象包含了处理类型与处理方法的相关关系。这是很重要的一点。

对于text类型的,它的Directive对象则是:

        directives.text = {
            bind: function () {
                this.attr = this.el.nodeType === 3
                    ? 'nodeValue'
                    : 'textContent'
            },
            update: function (value) {
                this.el[this.attr] = utils.guard(value)
            }
        }

回到compileTextNode方法继续向下执行:

        CompilerProto.bindDirective = function (directive, bindingOwner) {
            if (!directive) return
            ...
            if (directive.isExp) {
                // expression bindings are always created on current compiler
                binding = compiler.createBinding(key, directive)
            } else {
                // recursively locate which compiler owns the binding
                ...
                compiler = compiler || this
                binding = compiler.bindings[key] || compiler.createBinding(key)
            }
            binding.dirs.push(directive)
            ...
        }

上面又执行了compiler.createBinding(key),这里的key = ‘title’。

经过bindDirective方法的执行,最后会产生如下关系(这里很重要):

compiler.bindings.title = new Binding(compiler, 'ttile', false, false);
compiler.bindings.title.binding.dirs = [directive]; // 这里存放的是title对应的处理方法

执行到了这里就可以返回至compileTextNode方法的调用处。compileTextNode的初始化到这里就算完成了一步。

到这里可以返回至function Compiler(vm, options)方法处,继续向下。中间略过一些非核心的内容:

            // done!
            compiler.init = false

            // post compile / ready hook
            compiler.execHook('ready')

到这里初始化就算完成,并通过ready方法告知Vue已经准备好了。

事件的执行

接下来如果执行demo.title = 'Hello',就会触发set方法的内部的init方法,而init方法内部有这样的关键:

            function init(val, propagate) {
                values[key] = val
                /重要/ 
                emitter.emit('set', key, val, propagate)
                /重要/ 
                if (isArray(val)) {
                    emitter.emit('set', key + '.length', val.length, propagate)
                }
                observe(val, key, emitter)
            }

能看到上面的emitter.emit('set', key, val, propagate)方法被执行,我们就根据这个set查看它是怎么执行的:

        EmitterProto.emit = function (event, a, b, c) {
            this._cbs = this._cbs || {}
            var callbacks = this._cbs[event]

            if (callbacks) {
                callbacks = callbacks.slice(0)
                for (var i = 0, len = callbacks.length; i < len; i++) {
                    callbacks[i].call(this._ctx, a, b, c)
                }
            }

            return this
        }

上面这段代码通过event获取到对应的callbacks并进行回调,我们在上面已经得知set所对应的callbacks是onSet方法,我们再来回顾一下onSet

            function onSet(key, val, mutation) {
                observer.emit('change:' + key, val, mutation)
                check(key)
                compiler.bindings[key].update(val)
            }

而compiler.bindings的属性添加是在createBinding中进行的,这个我们上面就有提到。执行到这里key = ‘title’。

于是这里执行的便是:

        BindingProto.update = function (value) {
            if (!this.isComputed || this.isFn) {
                this.value = value
            }
            if (this.dirs.length || this.subs.length) {
                var self = this
                bindingBatcher.push({
                    id: this.id,
                    execute: function () {
                        if (!self.unbound) {
                            self._update()
                        }
                    }
                })
            }
        }

以下是bindingBatcher.push的实现细节:

BatcherProto.push = function (job) {
    if (!job.id || !this.has[job.id]) {
        this.queue.push(job)
        this.has[job.id] = job
        if (!this.waiting) {
            this.waiting = true
            utils.nextTick(utils.bind(this.flush, this))
        }
    } else if (job.override) {
        var oldJob = this.has[job.id]
        oldJob.cancelled = true
        this.queue.push(job)
        this.has[job.id] = job
    }
}

bindingBatcher.push方法会将参数对象经过包装交给:

    /**
     *  used to defer batch updates
     */
    nextTick: function (cb) {
        defer(cb, 0)
    },

而这里的defer为requestAnimationFrame方法,requestAnimationFrame会在下一次浏览器绘制时,触发cb回调方法。

其中的cb回调对象是由这个bind方法生成的:

    /**
     *  Most simple bind
     *  enough for the usecase and fast than native bind()
     */
    bind: function (fn, ctx) {
        return function (arg) {
            return fn.call(ctx, arg)
        }
    },

这里的fn是:

BatcherProto.flush = function () {
    // before flush hook
    if (this._preFlush) this._preFlush()
    // do not cache length because more jobs might be pushed
    // as we execute existing jobs
    for (var i = 0; i < this.queue.length; i++) {
        var job = this.queue[i]
        if (!job.cancelled) {
            job.execute()
        }
    }
    this.reset()
}

也就说紧接着flush方法会被requestAnimationFrame方法调用:

flush方法的核心是:

job.execute()

而这里的job对象就是刚刚被Push进去的:

	{
            id: this.id,
            execute: function () {
                if (!self.unbound) {
                    self._update()
                }
            }
    }

这里会执行self._update():

/**
 *  Actually update the directives.
 */
BindingProto._update = function () {
    var i = this.dirs.length,
        value = this.val()
    while (i--) {
        this.dirs[i].$update(value)
    }
    this.pub()
}

可以理解为这是一个事件分发过程。

这里从dirs中取出是一个与text相关的directive对象,这里执行的是directive对象的$update方法:

        DirProto.$update = function (value, init) {
            if (this.$lock) return
            if (init || value !== this.value || (value && typeof value === 'object')) {
                this.value = value
                if (this.update) {
                    this.update(
                        this.filters && !this.computeFilters
                            ? this.$applyFilters(value)
                            : value,
                        init
                    )
                }
            }
        }

上面的this对应的是之前提到的与text对应的处理器:

        directives.text = {
            bind: function () {
                this.attr = this.el.nodeType === 3
                    ? 'nodeValue'
                    : 'textContent'
            },
            update: function (value) {
                this.el[this.attr] = utils.guard(value)
            }
        }

而这里的update则是执行整个text更新的核心所在,通过对相应元素的nodeValue赋值便达到的更新值的效果。

以上内容仅仅是更新data值的粗略过程。vue还包括其它内容:如列表渲染、条件渲染、生命周期方法等等。

对于列表渲染和条件渲染它们分别有对应的处理器,对于它们的执行过程也和text的过程是一致的。


零散的记录一下:

emitter是vue引擎的核心,负责各种事件的分发。

它含有两个关键的方法:

		// 注册观察者方法,每个event可以理解为观察者,fn为观察者对应的事件回调对象集合。
        EmitterProto.on = function (event, fn) {
            this._cbs = this._cbs || {};
            (this._cbs[event] = this._cbs[event] || []).push(fn)
            return this
        }

        // 通知观察者,针对于观察的事件进行事件的分发处理
        EmitterProto.emit = function (event, a, b, c) {
            this._cbs = this._cbs || {}
            var callbacks = this._cbs[event]

            if (callbacks) {
                callbacks = callbacks.slice(0)
                for (var i = 0, len = callbacks.length; i < len; i++) {
                    callbacks[i].call(this._ctx, a, b, c)
                }
            }

            return this
        }

其中在vue中注册的观察者为:

    compiler.observer
            .on('get', onGet)
            .on('set', onSet)
            .on('mutate', onSet)
            .on('hook:attached', function () {
                    broadcast(1)
            })
            .on('hook:detached', function () {
                    broadcast(0)
            })
            .on('created', '自定义生命周期方法')
            .on('ready', '自定义生命周期方法')
            .on('beforeDestroy', '自定义生命周期方法')
            .on('afterDestroy', '自定义生命周期方法')
            .on('attached', '自定义生命周期方法')
            .on('detached', '自定义生命周期方法')
            .on('set', function (key) {
                if (key !== '$data') update()
            })
            .on('mutate', function (key) {
                if (key !== '$data') update()
            })
            ......

当某个Key所对应的事件被触发时,它所对应的回调就会被触发并执行。

总结

所以到此为止,我们搞清楚了Vue的主体框架。上文中有些乱,我们来梳理一下:

  • 最开始new Vue = new ViewModel = new Compiler
  • Compiler执行了对于自定义数据、自定义方法、自定义生命周期、自定义模板等等的处理。我们的示例演示了如何为自定义数据添加观察者方法。
  • Compiler解析了整颗DOM树,为树里面定义的占位符、v-指令、自定义组件做了处理。示例中演示了如何对占位符中的值进行解析以及添加观察者。
  • Compiler.bindings中存放了所有需要观察对象的绑定关系Binding对象。Binding中的dirs存放了相关key的处理对象Directive。
  • Emitter负责关键中转事件的注册与分发。
  • Batcher负责更新事件的提交。它将事件交给浏览器,由浏览器触发事件的执行。
  • Directives中存放了所有的指令。包括:if,repeat,on,model,with等等。
  • TextParser负责文本的萃取,解析。
  • Directive负责单个事件的触发,通过directive使更新执行。
  • Observer用于添加观察者。
  • Binding用于维护一些运行时的关键信息。
  • Utils中提供了一些非常棒的基础工具。
  • Config提供了一些可配的配置信息。
  • main.js是整个程序的执行入口,负责一些模块的加载和组装。

额外学习到的内容

除了摸清楚Vue的基础框架之外,我从代码中读到了以下信息:

  • 代码非常整洁,注释全面,结构合理、清晰。无额外注释和冗余代码。
  • 对于日志的输出做了控制,这也是一个优秀程序员所必备的。
  • 对于JS语言针对于类的使用值得借鉴。
  • 一些非常奇妙的用法。

良好的日志管控无处不在:

        function enableDebug() {
            /**
             *  log for debugging
             */
            utils.log = function (msg) {
                if (config.debug && console) {
                    console.log(msg)
                }
            }

            /**
             *  warnings, traces by default
             *  can be suppressed by `silent` option.
             */
            utils.warn = function (msg) {
                if (!config.silent && console) {
                    console.warn(msg)
                    if (config.debug && console.trace) {
                        console.trace()
                    }
                }
            }
        }

很多地方会看到这种写法:

slice.call(node.childNodes).forEach(this.compile, this);

slice方法在这里的作用是拷贝了一个副本出来,对于副本的操作不会引起原型的变动。这个对于拷贝数组副本的用法很妙。


以上。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页