手写Vue2核心原理（二）

龟中的程序员

已于 2023-04-14 13:59:33 修改

阅读量157

点赞数

分类专栏： Vue 文章标签： javascript 开发语言 ecmascript

于 2023-04-13 12:03:59 首次发布

本文链接：https://blog.youkuaiyun.com/HAI_GUI/article/details/130127294

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

文章详细阐述了Vue框架中Mixin的实现原理，通过`mergeOptions`函数合并组件的选项，特别是生命周期钩子(HOOKS)的处理。在合并过程中，对各个生命周期函数使用策略模式进行合并。最后，展示了如何在实例初始化时调用这些生命周期钩子，以及`_init`方法在其中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期的合并

源码地址：gitee源码地址

1.Mixin原理

import { mergeOptions } from '../utils/index';

export function initGlobalApi(Vue) {
    //> 源码：Vue.options = {created:[a,b,c],watch:[a,b,c]}
    Vue.options = {};
    Vue.Mixin = function (mixin) {
        // 对象的合并
        this.options = mergeOptions(this.options, mixin);
    };
}

2.合并生命周期

export const HOOKS = ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeDestroy', 'destroyed'];
export function mergeOptions(parent, child) {
    //> Vue.options = {created:[a,b,c],watch:[a,b,c]}
    const options = {};

    let starts = {};
    starts.data = function (parentVal, childVal) {
        return childVal;
    };
    starts.watch = function () {};
    starts.methods = function () {};
    starts.computed = function () {};

    // 遍历生命周期
    HOOKS.forEach((key) => {
        starts[key] = mergeHooks;
    });

    function mergeHooks(parentVal, childVal) {
        //> 判断是否有父或子
        if (childVal) {
            if (parentVal) {
                return parentVal.concat(childVal);
            }
            return [childVal];
        } else {
            return [parentVal];
        }
    }
    for (const key in parent) {
        mergeField(key);
    }
    for (const key in child) {
        mergeField(key);
    }
    function mergeField(key) {
        // 根据key 采用策略模式
        if (starts[key]) {
            options[key] = starts[key](parent[key], child[key]);
        } else {
            options[key] = child[key];
        }
    }
    return options;
}

4.调用生命周期

export function callHook(vm, hook) {
    const handlers = vm.$options[hook];
    if (handlers) {
        for (let i = 0; i < handlers.length; i++) {
            handlers[i].call(vm);
        }
    }
}

5.初始化流程中调用生命周期

Vue.prototype._init = function (options) {
    const vm = this;
    vm.$options = mergeOptions(vm.constructor.options,options);
    // 初始化状态
    callHook(vm,'beforeCreate');
    initState(vm);
    callHook(vm,'created');
    if (vm.$options.el) {
    	vm.$mount(vm.$options.el);
    }
}