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

vue源码分析（九）—— 合并配置

article 2024/11/15 2:30:01

文章目录

  • 前言
    • 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.kler.cn/a/315642.html

相关文章：

  • C++STL容器——map和set
  • Python高级编程模式和设计模式
  • Ubuntu 的 ROS 操作系统安装与测试
  • Flink1.19编译并Standalone模式本地运行
  • 基于微信小程序的乡村研学游平台设计与实现，LW+源码+讲解
  • @ComponentScan：Spring Boot中的自动装配大师
  • ChromaDB教程_2024最新版（上）
  • 【sgCreateCallAPIFunction】自定义小工具：敏捷开发→调用接口方法代码生成工具
  • Java String trim()方法
  • 如何创建模板提示prompt
  • Linux移植之系统烧写
  • Redis 中 String 字符串类型详解
  • 2024年中国研究生数学建模竞赛B题（华为题目）WLAN组网中网络吞吐量建模一
  • libtorch落地AI项目的一些总结
  • 面试题（八）
  • OpenCV_图像膨胀腐蚀与形态学操作及具体应用详解
  • 分布式安装LNMP
  • [OpenCV] 数字图像处理 C++ 学习——16直方图均衡化、直方图比较 详细讲解+附完整代码
  • 超详细的XML介绍【附带dom4j操作XML】
  • 口腔检测系统源码分享
  • php怎么连接使用kafka
  • 【AI算法岗面试八股面经【超全整理】——NLP】
  • 学生管理系统1.0版本
  • Kotlin 基本介绍(一)
  • 如何确保消息只被消费一次：Java实现详解
  • Python 中的 HTTP 编程入门，如何使用 Requests 请求网络