当前位置: 首页 > article >正文

vue原理分析(十四)研究new Vue()中的 initProvide

在Vue.prototype._init 中有一些init函数,今天我们来研究这些init函数

Vue.prototype._init = function (options) {
        ......
        {
            initProxy(vm);
        }
        ......
        initLifecycle(vm);
        initEvents(vm);
        initRender(vm);
        callHook$1(vm, 'beforeCreate', undefined, false /* setContext */);
        initInjections(vm); // resolve injections before data/props
        initState(vm);
        initProvide(vm); // resolve provide after data/props
        callHook$1(vm, 'created');
        ......
}


上一篇中已经研究了 initState ,今天我们往下研究

initProvide(vm);
function initProvide(vm) {

    const provideOption = vm.$options.provide;
    if (provideOption) {
        // 获取provided的对象
        const provided = isFunction(provideOption)
            ? provideOption.call(vm)
            : provideOption;
                        
        // 如过不是object对象且为null直接返回
        if (!isObject(provided)) {
            return;
        }
                
        // 解析provide
        const source = resolveProvided(vm);
        // IE9 doesn't support Object.getOwnPropertyDescriptors so we have to
        // iterate the keys ourselves.
        // IE9不支持Object.getOwnPropertyDescriptors所以这里必须自己去迭代keys
        const keys = hasSymbol ? Reflect.ownKeys(provided) : Object.keys(provided);
        for (let i = 0; i < keys.length; i++) {
            const key = keys[i];
            Object.defineProperty(source, key, Object.getOwnPropertyDescriptor(provided, key));
        }
    }
}
function resolveProvided(vm) {
    // by default an instance inherits its parent's provides object
    // but when it needs to provide values of its own, it creates its
    // own provides object using parent provides object as prototype.
    // this way in `inject` we can simply look up injections from direct
    // parent and let the prototype chain do the work.
    // 默认情况下,实例继承其父级的provides对象,
    // 但当它需要提供自己的值时,
    // 它会使用父级provides对象作为原型创建自己的provide对象。
    // 通过这种方式,在“inject”中,我们可以简单地从直接父级查找注入,并让原型链来完成工作。
    // existing 是 实例上的 _provided
    const existing = vm._provided;
    const parentProvides = vm.$parent && vm.$parent._provided;
    // 如果父级上的_provided和实例上的_provided一致,就将父级上的parentProvides赋给实例上的_provided
    // 否则直接返回实例上的属性
    if (parentProvides === existing) {
        return (vm._provided = Object.create(parentProvides));
    }
    else {
        return existing;
    }
}


http://www.kler.cn/news/303514.html

相关文章:

  • 局域网windows下使用Git
  • c#如何读取Modbus中Slave和Poll的值
  • vue之 package.json和package-lock.json
  • 【机器学习】线性动态系统的基本概念以及卡尔曼滤波器的概念和应用方式
  • c#引用同一命名空间下的其他类
  • 提权——Linux
  • Sequential的使用和搭建实战
  • js 深入理解生成器
  • 实时分析都靠它→揭秘YashanDB列式存储引擎的技术实现
  • 力扣第560题 和为k的子数组
  • 解锁编程潜力,从掌握GitHub开始
  • 突发!OpenAI发布最强模型o1:博士物理92.8分,IOI金牌水平
  • 高职人工智能训练师边缘计算实训室解决方案
  • 产品规划文档
  • PHP一键寄送尽在掌中快递寄件小程序
  • 设计模式篇--抽象工厂模式
  • Vue - 详细介绍vue-qr在线生成二维码组件(Vue2 Vue3)
  • 为 WebSocket 配置 Nginx 反向代理来支持 Uvicorn 的最佳实践
  • 动手学习RAG: moka-ai/m3e 模型微调deepspeed与对比学习
  • 苍穹外卖随记(一)
  • YOLOV8实现小目标检测
  • Qt自动打开文件夹并高亮文件
  • CI/CD持续集成和持续部署以及相关软件的使用
  • Docker日志管理之Filebeat+ELK日志管理
  • (不用互三)解密AI创作:提升Prompt提示词的提问技巧
  • VS Code 中提升编程效率的功能及使用方法
  • 大模型-模型架构-详细配置
  • 雷电9模拟器安装magisk和lsposed
  • 负载均衡:从理论到实践 ---day04
  • http连接与ssh连接的区别