【手写 Vue2.x 源码】第四十二篇 - 组件部分 - 组件挂载流程简述

news2024/11/14 13:30:55

一,前言

上篇,组件部分-生成组件的真实节点;

本篇,组件部分-组件挂载流程分析;


二,组件挂载流程分析

1,示例

  • 全局组件:my-button,name:‘全局组件’;
  • 局部组件:my-button;name:‘局部组件’;
<body>
  <div id="app">
    <my-button></my-button>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 全局组件
    Vue.component('my-button',{
      name:'my-button',
      template:'<button>Hello Vue {{name}}</button>',
      data(){
        return { name: '全局组件'}
      }
    })
    new Vue({
      el: "#app",
      components:{ // 局部组件
        'my-button':{
          template:'<button>Hello Vue {{name}}</button>',
          data(){
            return { name: '局部组件'}
          }
        }
      }
    });
  </script>

2,组件的挂载流程

// src/init.js

export function initMixin(Vue) {
  // 初始化
  Vue.prototype._init = function (options) {
    const vm = this; 
    
    vm.$options = mergeOptions(vm.constructor.options, options);
    initState(vm);

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }

  Vue.prototype.$mount = function (el) {
    const vm = this;
    const opts = vm.$options;
    el = document.querySelector(el);
    vm.$el = el;

    if (!opts.render) {
      let template = opts.template;
      if (!template) {
        template = el.outerHTML;
      }
      let render = compileToFunction(template);
      opts.render = render;
    }

    mountComponent(vm);
  }

  Vue.prototype.$nextTick = nextTick;
}

第一次进入,为根节点初始化,el 为 #app;

image.png

第二次进入,组件的初始化,el 为 undefined;

  • 继续,进行组件的挂载操作 mountComponent:

  • 组件的挂载:核心是创造出一个组件的虚拟节点,并调用他的更新方法 _update:

  • render.call 创造组件的虚拟节点 vnode,即 button 的虚拟节点:

  • vm.render 执行完成后,继续执行 _update 方法:

  • 这时,不能获取到上一次的虚拟节点:

  • 当组件挂载时,$patch 方法中的 el 为 null;

  • 此时,patch 内部判断了,如果 oldVnode 为 null,就使用组件的虚拟节点,创建出组件的真实节点:

  • 此时,返回的 vm.$el 就是 button 内部包含着内容:

    此时,子组件就挂载完毕了!

  • vnode.componentInstance存在,说明是组件,createComponent 方法返回 true:

  • createElm 方法中,返回组件的 $el,即组件对应的真实节点 button:

  • createElm 递归处理,将生成的组件真实节点,放到对应的父节点上;

  • 再将完整的 div 挂在到页面上


三,完成流程

1,实现了 Vue.component,它的核心功能是注册成全局组件;

内部会自动调用 Vue.extend 方法,返回组件的构造函数;

2,在组件初始化时,会做组件的合并;

mergeOptions 先找自己的局部组件,然后再通过链继续向上找全局组件;

3,合并完成之后,内部会对模板进行编译操作,最终会走到_c(‘组件名’)

做标签筛查,创建组件虚拟节点;若 Ctor 为对象,需要使用 Vue.extend 处理为组件的构造函数;

所以,所有的组件都是通过 Vue.extend 方法来实现的;

4,创建组件的真实节点

  • 通过 new Ctor 得到组件实例;
  • 组件实例调用 $mount 方法:生成组件的真实节点 $el,对应组件模板渲染后的结果
  • 通过 vnode.componentInstance = new Ctor() 使后面可以拿到组件渲染后的结果: vnode.componentInstance.$el

5,将组件的 vnode.componentInstance.$el 插入到父标签中

6, 在 new Ctor() 组件实例化时,会执行组件初始化流程,为组件添加独立的渲染过程;

  • 每个组件实例都拥有独立的渲染 watcher;
  • 当组件渲染时,组件对应的属性会收集自己的渲染 watcher;
  • 当组件更新时,只需更新组件对应的渲染 watcher 即可;
  • 所以,组件是局部更新的,性能也会比较好

四,结尾

本篇,组件部分-组件挂载流程简述;

下篇,组件部分-组件相关流程总结;

备注:还需要添加很多图,后续迭代。。。

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

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

相关文章

什么是软件架构中的ASRs(架构需求文档)?

作者&#xff1a;非妃是公主 专栏&#xff1a;《软件工程》 个性签&#xff1a;顺境不惰&#xff0c;逆境不馁&#xff0c;以心制境&#xff0c;万事可成。——曾国藩 专栏地址 软件工程专栏地址 专栏系列文章 软件工程复习01&#xff1a;软件工程概述 软件工程复习02&#xf…

十大经典排序算法(动态演示+代码)-快速排序与希尔排序

快速排序 1.什么是快速排序 我们知道排序有很多种&#xff0c;常见的如希尔排序&#xff0c;插入排序&#xff0c;选择排序&#xff0c;堆排序等等&#xff0c;而快速排序也是排序家族中的一员。因为其在大多数情况下有着优秀的综合性能&#xff0c;快速排序的快速也算是实至…

结构型模式-享元模式

1.概述 运用共享技术来有效地支持大量细粒度对象的复用。它通过共享已经存在的对象来大幅度减少需要创建的对象数量、避免大量相似对象的开销&#xff0c;从而提高系统资源的利用率。 2.结构 享元&#xff08;Flyweight &#xff09;模式中存在以下两种状态&#xff1a; 内…

信息论复习—信源编码的基本方法

目录 信源编码的目的&#xff1a;提高传输效率 离散信源&#xff1a; 离散信源的分类&#xff1a; 离散无记忆信源 (DMS: Discrete Memoryless Source&#xff09;&#xff1a; 离散无记忆信源的特点&#xff1a; 离散无记忆信源编码与译码&#xff1a; 等长编码的编码速…

Day869.索引(下) -MySQL实战

索引&#xff08;下&#xff09; Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于索引&#xff08;下&#xff09;的内容。 先来看一下这个问题&#xff1a; 下面这个表 T 中&#xff0c;如果执行 select * from T where k between 3 and 5&#xff0c;需要执行几次…

【Java|golang】1828. 统计一个圆中点的数目

给你一个数组 points &#xff0c;其中 points[i] [xi, yi] &#xff0c;表示第 i 个点在二维平面上的坐标。多个点可能会有 相同 的坐标。 同时给你一个数组 queries &#xff0c;其中 queries[j] [xj, yj, rj] &#xff0c;表示一个圆心在 (xj, yj) 且半径为 rj 的圆。 对…

git 操作整理

git操作整理 git 配置 git config --global user.name “yuluo” git config --global user.email “1481556636qq.com” git config --global color.ui auto 启用命令行着色输出 git 操作 暂存区 git init . 初始化git仓库 git status 看仓库状态 git add index.html…

【C++】C++11简介 | 列表初始化 | 声明 | 范围for

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《吃透西嘎嘎》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;C11简介&…

安装配置Ecplise插件PyDev 8.3.0

参考&#xff1a;安装Eclipse&#xff1a;https://baijiahao.baidu.com/s?id1751992697661111503&wfrspider&forpcEclipse安装PyDev&#xff1a;https://baijiahao.baidu.com/s?id1746725485069671146&wfrspider&forpc方法一&#xff1a;失败打开eclipse&…

分享138个ASP源码,总有一款适合您

ASP源码 分享138个ASP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 138个ASP源码下载链接&#xff1a;https://pan.baidu.com/s/1idRmCxILGVt5pBkac-GiiA?pwdjmmu 提取码&#x…

AX7A200教程(4): DDR3的读写fifo仿真

在上篇博客中&#xff0c;我们只是进行突发读写&#xff0c;没有使用读写fifo对ddr3进行读写&#xff0c;因ddr3读写接口都是256位宽&#xff0c;所以ddr3的读写fifo输入和输出都是32位&#xff0c;和ddr3对接的接口都是256位&#xff0c;如下面示意图所示。下面的截图为ddr3的…

《c++ primer》第五章 语句

前言 建议看书的时候就看一下异常&#xff0c;其它的直接跳过 一、简单语句 ​ 一条表达式语句以;结尾&#xff0c;它的作用是执行表达式并丢弃掉求值结果。一行如果只有一个;也是一条语句&#xff0c;称为空语句。复合语句时用{}括起来的语句或者声明&#xff0c; 也称为块&a…

Qt之QLCDNumber

文章目录一、QLCDNumber简介二、QLCDNumber属性示例获取系统时间示例代码提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、QLCDNumber简介 QLCDNumber控件用于显示一个LCD数字。 它可以显示几乎任意大小的数字。可以显示十进制、十六进制、八进制或…

【并发编程】ForkJoin线程池

一、使用场景 用于CPU密集型的任务&#xff0c;通过把任务进行拆分&#xff0c;拆分成多个小任务去执行&#xff0c;然后小任务执行完毕后再把每个小任务执行的结果合并起来&#xff0c;这样就可以节省时间。 CPU密集型&#xff08;CPU-bound&#xff09;&#xff1a;CPU密集…

Java 初识IO流

IO流概述 用于读写文件中的数据&#xff08;可以读写文件&#xff0c;或网络中的数据…&#xff09; IO流的分类 纯文本文件:用windows系统自带的记事本打开并且能读懂的文件。如&#xff1a;txt文件、md文件、xml文件、lrc文件等. IO流的体系 总结 什么是IO流&#xff1f; 存…

Amesim2021.1与Simulink联合仿真配置流程及经验总结

Amesim 与 Simulink 联合仿真配置相对比较麻烦&#xff0c;笔者曾经凭运气配置成功过&#xff0c;但后来在别的电脑又多次配置失败&#xff0c;经过一些尝试及咨询专业人士&#xff0c;对Amesim2021.1版本与Simulink联合仿真配置做了一个流程总结&#xff0c;希望能帮助有需求的…

AutoSAR MemMap模块实例解析及注意事项

文章目录 1 AUTOSAR Memory Mapping的运行机制1.1 AUTOSAR Memory Mapping实例解析1.2 编译器的选择2 内存分配关键字3 如何生成BSW和 SWC的MemMap.h文件4 编译优化的影响传送门 ==>> AutoSAR入门和实战系列总目录 1 AUTOSAR Memory Mapping的运行机制 AUTOSAR Memory …

恶意代码分析实战 6 OllyDbg

6.1 Lab 9-1 程序分析 首先&#xff0c;进行静态分析&#xff0c;使用strings。 CreateFileA RegQueryValueExA RegOpenKeyExA RegSetValueExA RegCreateKeyExA RegDeleteValueA WideCharToMultiByte GetModuleHandleA GetEnvironmentVariableA SetEnvironmentVariableA SOFTW…

DaVinci:Camera Raw(ARRI)

本文主要介绍 ARRI 的 Raw 格式素材相关的 Camera Raw 参数。解码质量Decode Quality解码质量决定了图像解拜耳之后所呈现的素质&#xff0c;也与最终的输出息息相关。默认为“使用项目设置” Use project setting&#xff0c;表示使用项目设置对话框中的“Camera RAW”解码质量…

mysql之explain(性能分析)

目录 1.说明 2.使用方式 3.字段解释 (1)id (2)select_type (3)table (4)type (5)possible_keys (6)keys (7)ken_len (8)ref ​编辑 (9)rows (10)extra 4.示例 1.说明 使用EXPLAIN关键字可以模拟优化器执行SOL查询语句&#xff0c;从而知道MySOL是如何处理你的S…