vue源码分析(九)—— 合并配置

news2024/11/15 15:30:51

文章目录

  • 前言
    • 1.vue cli 创建一个基本的vue2 项目
    • 2.将mian.js文件改成如下
    • 3. 运行结果及其疑问?
  • 一、使用 `new Vue` 创建过程的 2 种场景
  • 二、margeOption的详细说明
    • 1.margeOption的方法地址
    • 2.合并策略的具体使用
    • 3.defaultStrat 默认策略方法
  • 三:以生命周期来查看合并策略
    • 1. 遍历所有的key执行方法
    • 2. LIFECYCLE_HOOKS的key值定义文件路径
    • 3. mergeLifecycleHook方法的简单概况
  • 四:子组件调用逻辑
    • 1. 回到new Vue初始化逻辑中,options的逻辑
    • 2. 合并options的逻辑
    • 3. initInternalComponent的作用
    • 4:子组件合并策略的总结


前言

为什么使用mixin中使用生命周期方法created,会重复执行两次?

1.vue cli 创建一个基本的vue2 项目

2.将mian.js文件改成如下

在这里插入图片描述

3. 运行结果及其疑问?

在这里插入图片描述


一、使用 new Vue 创建过程的 2 种场景

(1)一种是代码主动调用 new Vue(options) 的方式实例化一个 Vue 对象
(2)一种是组件过程中内部通过 new Vue(options) 实例化子组件。(先创建一个父节点占位符,然后再遍历所有子 VNode 递归调用 createElm,在遍历的过程中,如果遇到子 VNode 是一个组件的 VNode,则重复本节开始的过程,这样通过一个递归的方式就可以完整地构建了整个组件树。)

无论哪种方式,都需要调用一个方法margeOption,路径为src/core/instance/init.tss
在这里插入图片描述

二、margeOption的详细说明

1.margeOption的方法地址

在这里插入图片描述

2.合并策略的具体使用

在这里插入图片描述

3.defaultStrat 默认策略方法

这个方法很简单:没有子级,返回父级,有子级返回自己

const defaultStrat = function (parentVal: any, childVal: any): any {
  return childVal === undefined ? parentVal : childVal
}

在这里插入图片描述

三:以生命周期来查看合并策略

1. 遍历所有的key执行方法

在这里插入图片描述

2. LIFECYCLE_HOOKS的key值定义文件路径

其实就是生命周期的key的定义
在这里插入图片描述

3. mergeLifecycleHook方法的简单概况

在这里插入图片描述

四:子组件调用逻辑

1. 回到new Vue初始化逻辑中,options的逻辑

在这里插入图片描述

2. 合并options的逻辑

在这里插入图片描述

3. initInternalComponent的作用

== 就是简单的给当前的vm对象赋值,生成了一个新的$options==
在这里插入图片描述

4:子组件合并策略的总结

就是调用了init方法,然后调用initInternalComponent方法,将传入的子组件的值重新赋值,生成了一个新的options

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2157198.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenResty安装及使用

🍓 简介:java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…

调用本地大模型服务出现PermissionDeniedError的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【机器学习】---神经架构搜索(NAS)

这里写目录标题 引言1. 什么是神经架构搜索(NAS)1.1 为什么需要NAS? 2. NAS的三大组件2.1 搜索空间搜索空间设计的考虑因素: 2.2 搜索策略2.3 性能估计 3. NAS的主要方法3.1 基于强化学习的NAS3.2 基于进化算法的NAS3.3 基于梯度的…

ICM20948 DMP代码详解(38)

接前一篇文章:ICM20948 DMP代码详解(37) 上一回继续解析inv_icm20948_set_slave_compass_id函数,解析了第3段代码,本回解析接下来的代码。为了便于理解和回顾,再次贴出该函数源码,在EMD-Core\so…

队列+宽搜专题篇

目录 N叉树的层序遍历 二叉树的锯齿形层序遍历 二叉树最大宽度 在每个树行中找最大值 N叉树的层序遍历 题目 思路 使用队列层序遍历来解决这道题,首先判断根节点是否为空,为空则返回空的二维数组;否则,就进行层序遍历&#x…

chapter 12 Bandgap References

chapter 12 Bandgap References 这一章我们介绍电压和电流基准. 首先学习和输入电压无关的偏置和起动问题. 然后介绍和温度有关的基准电压, 考虑offset对输出电压的影响. 最后学习恒定gm偏置和state-of-the-art电压基准. 12.1 General Considerations 一般基准电流有三种形式…

鸿蒙OpenHarmony【轻量系统芯片移植案例】标准系统方案之瑞芯微RK3566移植案例

标准系统方案之瑞芯微RK3566移植案例 本文章是基于瑞芯微RK3566芯片的khdvk_3566b开发板,进行标准系统相关功能的移植,主要包括产品配置添加,内核启动、升级,音频ADM化,Camera,TP,LCD&#xff…

数据集-目标检测系列-摩托车检测数据集 motorcycle >> DataBall

数据集-目标检测系列-摩托车检测数据集 motorcycle >> DataBall 数据集-目标检测系列-摩托车(motorcycle)检测数据集 数据量:1W 想要进一步了解,请联系 DataBall。 DataBall 助力快速掌握数据集的信息和使用方式&#xf…

AI 智能名片链动 2+1 模式商城小程序中的体验策略

摘要:本文探讨了在 AI 智能名片链动 21 模式商城小程序中,体验策略如何服务于用户体验,以及与产品策略的区别。重点分析了该小程序如何通过关注用户在使用过程中的流畅度、视觉体感等方面,实现“让用户用得爽”的目标,…

MWD天气图像多分类数据集,用于图像分类总共6个类别,多云,下雨,下雪,雾天,正常天气,共60000张图像数据

MWD天气图像多分类数据集,用于图像分类 总共6个类别,多云,下雨,下雪,雾天,正常天气,共60000张图像数据 MWD天气图像多分类数据集 (Multi-Weather Dataset, MWD) 数据集描述 MWD天气图像多分类…

哔哩哔哩自动批量删除抽奖动态解析篇(三)

前面两节已经介绍了如何获取抽奖动态列表和根据动态id_str索引值判断是否开奖了,接下来我们要完成的就是删除已经开奖了的动态 一、删除已经开奖的抽奖动态 老规矩,我们按F12健进入网页源代码,删除一条动态,观察网络接口 这次…

论文阅读 | 可证安全隐写(网络空间安全科学学报 2023)

可证安全隐写:理论、应用与展望 一、什么是可证安全隐写? 对于经验安全的隐写算法,即使其算法设计得相当周密,隐写分析者(攻击者)在观察了足够数量的载密(含有隐写信息的数据)和载体…

Redis数据结构之list列表

一.list列表 列表相当于数组或者顺序表 它里面的元素是有序的,也就是可以通过下标进行访问。这里的有序的含义是要根据上下文区分的,有的时候,有序指的是升序/降序,有的时候有序指的是顺序很关键,俩个元素交换后就不…

Spring6梳理10—— 依赖注入之注入数组类型属性

以上笔记来源: 尚硅谷Spring零基础入门到进阶,一套搞定spring6全套视频教程(源码级讲解)https://www.bilibili.com/video/BV1kR4y1b7Qc 目录 10 依赖注入之注入数组类型属性 10.1 创建Emp实体类,Dept实体类 10.2…

Java 每日一刊(第15期):内部类

文章目录 前言内部类成员内部类(Member Inner Class)静态内部类(Static Nested Class)局部内部类(Local Inner Class)匿名内部类(Anonymous Inner Class) 内部类的详细对比内部类字节…

浅谈Spring Cloud:Nacos的配置

Nacos,一个更易于构建云原生应用的动态服务发现,配置管理和服务管理平台。所以Nacos是⼀个注册中心组件,但它又不仅仅是注册中心组件。 目录 安装 注册 负载均衡 环境隔离 配置管理 搭建集群 安装 在官网下载好安装包解压后&#xf…

深度学习01-概述

深度学习是机器学习的一个子集。机器学习是实现人工智能的一种途径,而深度学习则是通过多层神经网络模拟人类大脑的方式进行学习和知识提取。 深度学习的关键特点: 1. 自动提取特征:与传统的机器学习方法不同,深度学习不需要手动…

手机在网状态查询接口如何用Java进行调用?

一、什么是手机在网状态查询接口? 手机在网状态查询接口,又叫运营商在网状态查询,手机号在网状态查询,传入手机号码,查询该手机号的在网状态,返回内容有正常使用、停机、在网但不可用、不在网(…

【网络】高级IO——epoll版本TCP服务器初阶

目录 前言 一,epoll的三个系统调用接口 1.1.epoll_create函数 1.1.1.epoll_create函数干了什么 1.2. epoll_ctl函数 1.2.1.epoll_ctl函数函数干了什么 1.3.epoll_wait函数 1.3.1.epoll_wait到底干了什么 1.4.epoll的工作过程中内核在干什么 二,…

【Elasticsearch系列廿】Logstash 学习

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…