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

文章目录

  • 前言
    • 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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于单片机的水位检测系统仿真

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STC89C52单片机,DHT11温湿度采集温湿度,滑动变阻器连接ADC0832数模转换器模拟水位传感器检测水位,通过LCD1602显示信息,然后在程序里设置好是否…

docker启动mysql未读取my.cnf配置文件问题

描述 在做mysql主从复制配置两台mysql时,从节点的my.cnf配置为: [mysqld] datadir /usr/local/mysql/slave1/data character-set-server utf8 lower-case-table-names 1 # 主从复制-从机配置# 从服务器唯一 ID server-id 2 # 启用中继日志 relay-l…

【编程底层原理】Java对象头的详细结构、锁机制及其优化技术,以及逃逸分析和JIT技术在性能优化中的作用

一、引言 在Java的多线程世界中,对象头和锁机制是确保数据一致性和程序性能的关键。本文将带你深入探索Java对象头的结构、锁机制的工作原理,以及逃逸分析和即时编译(JIT)技术如何助力性能优化。 二、Java对象头 1. 对象头的组…

6.数据库-数据库设计

6.数据库-数据库设计 文章目录 6.数据库-数据库设计一、设计数据库的步骤二、绘制E-R图三、关系模式第一范式 (1st NF)第二范式 (2nd NF)第三范式 (3nd NF)规范化和性能的关系 一、设计数据库的步骤 收集信息 与该系统有关人员进行交流、座谈,充分了解用户需求&am…

8. 防火墙

8. 防火墙 (1) 防火墙的类型和结构 防火墙的类型和结构可以根据其在网络协议栈中的过滤层次和实现方式进行分类。常见的防火墙类型包括: 包过滤防火墙:工作在网络层(OSI模型的第3层),主要检查IP包头的信息,如源地址、目的地址、端口号等。电路级网关防火墙:工作在会话层…

操作系统简介

大学的操作系统课程是计算机科学与技术专业的重要基础课程之一,旨在帮助学生理解和掌握现代操作系统的基本原理和核心技术。这门课程不仅涵盖操作系统的理论知识,还包括实践内容,帮助学生在实际应用中理解操作系统的工作机制。以下是操作系统…

CSS 布局三大样式简单学习

目录 1. css 浮动 1.1 效果1 1.2 效果2 1.3 效果3 1.4 效果4 2. css 定位 2.1 absolute 2.2 relative 2.3 fixed 3. css 盒子模型 3.1 效果1 3.2 效果2 3.3 效果3 3.4 效果4 1. css 浮动 1.1 效果1 1.2 效果2 1.3 效果3 1.4 效果4 2. css 定位 2.1 absolute 2.2 …

source insight学习笔记

目录 目的 基础配置 1、护眼的保护色 2、行号显示 基础操作 目的 记录一下使用source insight中遇到的问题。比如常见好用的基础配置,常用的基础操作等。主要是为了自己以后忘记了好找。自己写的东西总归看起来更舒服。 PS:目前是第一个版本&#…

C++--模板(template)详解—— 函数模板与类模板

目录 1.泛型编程 2.函数模板 2.1 函数模板概念 2.2 函数模板格式 2.3 函数模板的原理 2.4 函数模板的实例化 2.5 模板参数的匹配原则 3.类模板 3.1 类模板的定义格式 3.2 类模板的实例化 1.泛型编程 在C中如果让你写一个交换函数,应该怎么做呢&#xff1f…

【数据结构与算法 | 灵神题单 | 二叉搜索树篇】力扣99, 1305, 230, 897

1. 力扣99:恢复二叉搜索树 1.1 题目: 给你二叉搜索树的根节点 root ,该树中的 恰好 两个节点的值被错误地交换。请在不改变其结构的情况下,恢复这棵树 。 示例 1: 输入:root [1,3,null,null,2] 输出&…

EMT-LTR--学习任务间关系的多目标多任务优化

EMT-LTR–学习任务间关系的多目标多任务优化 title: Learning Task Relationships in Evolutionary Multitasking for Multiobjective Continuous Optimization author: Zefeng Chen, Yuren Zhou, Xiaoyu He, and Jun Zhang. journal: IEE…

240922-chromadb的基本使用

A. 背景介绍 ChromaDB 是一个较新的开源向量数据库,专为高效的嵌入存储和检索而设计。与其他向量数据库相比,ChromaDB 更加专注于轻量化、简单性和与机器学习模型的无缝集成。它的核心目标是帮助开发者轻松管理和使用高维嵌入向量,特别是与生…

【计算机网络 - 基础问题】每日 3 题(十八)

✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/fYaBd 📚专栏简介:在这个专栏中,我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏&…

通信工程学习:什么是NFV网络功能虚拟化

NFV:网络功能虚拟化 NFV(Network Function Virtualization),即网络功能虚拟化,是一种通过虚拟化技术实现网络功能的技术手段。它借鉴了x86服务器的架构,将传统的网络硬件设备如路由器、交换机、防火墙、负载…

华为eNSP使用详解

eNSP(Enterprise Network Simulation Platform)是华为提供的一款网络仿真平台,它允许用户在没有真实设备的情况下进行网络实验和学习网络技术。eNSP可以模拟各种网络设备,如交换机、路由器、防火墙等,并支持创建多种网…

【python】【绘制小程序】动态爱心绘制

背景介绍 参考链接:https://blog.csdn.net/Python_HUHU/article/details/139703289点的背景颜色在开始修改;文字的颜色在最后修改。文字内容可以修改。 python 代码 import tkinter as tk import random from math import sin, cos, pi, log from PIL…

VMware ESXi 8.0U3b macOS Unlocker OEM BIOS 2.7 集成网卡驱动和 NVMe 驱动 (集成驱动版)

VMware ESXi 8.0U3b macOS Unlocker & OEM BIOS 2.7 集成网卡驱动和 NVMe 驱动 (集成驱动版) 发布 ESXi 8.0U3 集成驱动版,在个人电脑上运行企业级工作负载 请访问原文链接:https://sysin.org/blog/vmware-esxi-8-u3-sysin/,查看最新版…

数字IC设计\FPGA 职位经典笔试面试整理--基础篇1

注: 资料都是基于网上一些博客分享和自己学习整理而成的 1:什么是同步逻辑和异步逻辑? 同步逻辑是时钟之间有固定的因果关系。异步逻辑是各时钟之间没有固定的因果关系。 同步时序 逻辑电路的特点:各触发器的时钟端全部连接在一…

基于机器学习的注意力缺陷/多动障碍 (ADHD)(python论文+代码)HYPERAKTIV

简述 医疗保健领域的机器学习研究往往缺乏完全可重复性和可比性所需的公共数据。由于患者相关数据附带的隐私问题和法律要求,数据集往往受到限制。因此,许多算法和模型发表在同一主题上,没有一个标准的基准。因此,本文提出了一个公…

【STM32】TIM定时器定时中断与定时器外部时钟的使用

TIM定时器定时中断与定时器外部时钟的使用 一、TIM定时器简介1、TIM(Timer)定时器2、定时器类型3、高级定时器4、通用定时器5、基本定时器6、定时中断基本结构代码编写:定时中断/外部时钟定时中断 7、预分频器时序8、计数器时序9、计数器无预…