Vue源码后记-钩子函数

Posted QH-Jimmy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue源码后记-钩子函数相关的知识,希望对你有一定的参考价值。

  vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方。

  本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过一下~

  想到什么写什么了,这节就简单说说钩子函数吧!

 

  vue中的钩子函数主要包含初始化的beforeCreated/created,Virtual Dom更新期间的beforeUpdate/updated,页面渲染期间的beforeMount/mounted,组件销毁期间的beforeDestroy/destroyed等等。

  vue框架会在合适的时间点调用对应的钩子函数,调用过程其实很简单,看一下源码的函数就明白了:

    // vm为当前vue实例
    // hook为钩子函数名称
    function callHook(vm, hook) {
        // 获取对相应的钩子函数内容
        var handlers = vm.$options[hook];
        if (handlers) {
            for (var i = 0, j = handlers.length; i < j; i++) {
                try {
                    // 直接调用
                    handlers[i].call(vm);
                } catch (e) {
                    handleError(e, vm, (hook + " hook"));
                }
            }
        }
        // 钩子函数事件emit
        if (vm._hasHookEvent) {
            vm.$emit(\'hook:\' + hook);
        }
    }

  其中vm.$option中包含了vm中所有的钩子函数已经其他一些配置,根据对应的hook字符串取出来然后用call执行。

  可以从一个简单的例子跑一遍:

    <body>
        <div id=\'app\'>
            {{message}}
        </div>
    </body>
    <script src=\'./vue.js\'></script>
    <script>
        var app = new Vue({
            el: \'#app\',
            data: {
                message: \'Hello Vue!\'
            },
            beforeCreate: function() {
                console.log(\'beforeCreate\');
            }
        });
    </script>

  样本案例还是之前跑源码的,只不过在这里额外加了一个钩子函数,随便选了一个beforeCreate。

  跑源码我写过,对象会以options对象的形式与baseOptions进行合并处理,如下:

    Vue.prototype._init = function() {
        // code...

        vm.$options = mergeOptions(
            resolveConstructorOptions(vm.constructor),
            options || {},
            vm
        );

        // code...
    }

  其options就是new Vue传进来的那个对象,mergeOptions如下:

    function mergeOptions(parent, child, vm) {
        // code...
        for (key in child) {
            if (!hasOwn(parent, key)) {
                mergeField(key);
            }
        }

        function mergeField(key) {
            var strat = strats[key] || defaultStrat;
            options[key] = strat(parent[key], child[key], vm, key);
        }
        return options
    }

  其余的属性都跳过,目前主关注钩子函数的处理。函数内部会遍历child(即传进来的对象),然后根据键名取对应strats对象的函数对值进行处理。

  可以简略看一下strats对象:,基本上包含所有可能的键,无论是钩子函数、值、计算属性、方法等,所有的参数会被处理。

  而beforeCreate参数被分类为钩子函数,会调用mergeHook函数,源码如下:

    // parentVal => undefined
    // childVal => function(){...}
    function mergeHook(parentVal, childVal) {
        return childVal ?
            parentVal ?
            parentVal.concat(childVal) :
            Array.isArray(childVal) ?
            childVal : [childVal] :
            parentVal
    }

  这个函数同时也处理props属性,所以接受两个参数。如果是钩子函数,则parentVal为undefined,这个超长三元表达式稍微解说一下:

  childVal有没有?有啊,好,那parentVal呢?没,那childVal是不是数组啊?不是,是个函数。好,包起来,弄成数组返回吧!

  于是,最终钩子函数被包装了这样:

  

  现在,回到最开始那个callHook函数,就能跑得通了。handlers就是这个数组,for循环遍历,取出函数,调用call方法执行钩子函数代码,看情况emit一下,返回。

  

  钩子函数的作用我就不解释了,这个网上随便查都有,我就简单说说为什么要在created中调用ajax初始化数据,一起来看看源码:

    function initMixin(Vue) {
        // code...

        initLifecycle(vm);
        initEvents(vm);
        initRender(vm);
        callHook(vm, \'beforeCreate\');
        initInjections(vm); // resolve injections before data/props
        initState(vm);
        initProvide(vm); // resolve provide after data/props
        callHook(vm, \'created\');

        // code...
    }

  在beforeCreate阶段,vue仅仅完成了参数合并,以及在vm上添加了大量空属性,并没有实际开始初始化操作,这时候如果调用ajax,并调用this.data你会发现:

  对的,压根就没有这个属性。

  但是,在之后的initState初始化中(有兴趣可以回头看下我的流水账呀),会将data属性解析并添加到vm上,并且已经有对应的响应式方法了。

  所以说,这个时候页面还没有渲染,非常适合进行数据初始化。

  

  背不来网上的生命周期,自己画个图:

  

  

  

以上是关于Vue源码后记-钩子函数的主要内容,如果未能解决你的问题,请参考以下文章

Vue源码系列之生命钩子beforeCreate&created

Vue源码后记-其余内置指令

如何理解 Vue 中的生命周期

如何理解 Vue 中的生命周期

vue源码 | 导航守卫的整体逻辑

Vue源码学习- Hook Event