vue实例挂载过程

以下仅为个人见解。 

1.大致流程:

  1. new Vue()时会调用initMixin(Vue)将_init挂载到vue原型上;
  2. 在_init()中调用$mount()方法($mount()方法也是挂载到vue原型上的)编译template模版,并生成render()函数;
  3. 挂载到vm上后,会再次调用$mount()并返回调用mountComponet()方法,mountComponet中的updateComponent()方法调用vue原型上的render()和update()方法,最后进行页面渲染

2. Vue.prototype._init

主要初始化proxy拦截器,初始化组件事件监听,初始化渲染方法,初始化依赖注入,初始化数据(props/data/method/computed/watch),初始化provide注入,调用$mount()

    // 初始化proxy拦截器initProxy(vm)// 初始化组件生命周期标志位initLifecycle(vm)// 初始化组件事件侦听initEvents(vm)// 初始化渲染方法initRender(vm)callHook(vm, 'beforeCreate')// 初始化依赖注入内容,在初始化data、props之前initInjections(vm) // resolve injections before data/props// 初始化props/data/method/computed/watchinitState(vm)initProvide(vm) // resolve provide after data/propscallHook(vm, 'created')....vm.$mount(vm.$options.el)

3. Vue.prototype.$mount()首次调用进行模版编译

1.可以在对象中定义template/render或者直接使用template、el表示元素选择器
2.将template解析ast tree
3.将ast tree转换成render语法字符串
4.生成render方法

template获取过程:

 4.生成render()函数后,会挂载到vm上,然后再次调用vue原型上的$mount()方法

 此次调用会返回mountComponent()

// public mount method
Vue.prototype.$mount = function (el?: string | Element,hydrating?: boolean
): Component {el = el && inBrowser ? query(el) : undefined// 渲染组件return mountComponent(this, el, hydrating)
}

updateComponent(): mountComponent()中调用updateComponent()执行初始化时原型上的_render和_update()方法

// 定义更新函数updateComponent = () => {// 实际调⽤是在lifeCycleMixin中定义的_update和renderMixin中定义的_rendervm._update(vm._render(), hydrating)}

5.Vue.prototype.render方法

主要是生成VNode

6.Vue.prototype.update方法

_update主要功能是调用patch,将vnode转换为真实DOM,并且更新到页面中 

参考:

面试官:Vue实例挂载的过程 | web前端面试 - 面试官系列

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【【Verilog典型电路设计之FIFO设计】】

典型电路设计之FIFO设计 FIFO (First In First Out)是一种先进先出的数据缓存器,通常用于接口电路的数据缓存。与普通存储器的区别是没有外部读写地址线,可以使用两个时钟分别进行写和读操作。FIFO只能顺序写入数据和顺序读出数据&#xff0…

【报错】git push --set-upstream origin XXXX重名

您在尝试将分支推送到远程仓库时遇到了错误。错误信息表明,由于已经存在名为 refs/heads/xingfan/demo 的文件夹,Git 无法创建分支 refs/heads/xingfan。 要解决此问题,您可以尝试重命名本地分支,然后将其推送到远程仓库。以下是…

大模型基础02:GPT家族与提示学习

大模型基础:GPT 家族与提示学习 从 GPT-1 到 GPT-3.5 GPT(Generative Pre-trained Transformer)是 Google 于2018年提出的一种基于 Transformer 的预训练语言模型。它标志着自然语言处理领域从 RNN 时代进入 Transformer 时代。GPT 的发展历史和技术特点如下: GP…

无脑入门pytorch系列(三)—— nn.Linear

本系列教程适用于没有任何pytorch的同学(简单的python语法还是要的),从代码的表层出发挖掘代码的深层含义,理解具体的意思和内涵。pytorch的很多函数看着非常简单,但是其中包含了很多内容,不了解其中的意思…

Linux Kernel的local_irq_enable()和local_irq_disable()函数

代码如下图所示,最终操作的是msr daifset, #3 和 msr daifclr, #3 寄存器。 (include/linux/irqflags.h) #define local_irq_enable() do { raw_local_irq_enable(); } while (0) #define local_irq_disable() do { raw_local_irq_disable(); } while (0)#define ra…

【AIGC】 国内版聊天GPT

国内版聊天GPT 引言一、国内平台二、简单体验2.1 提问2.2 角色扮演2.3 总结画图 引言 ChatGPT是OpenAI发开的聊天程序,功能强大,可快速获取信息,节省用户时间和精力,提供个性化的服务。目前国产ChatGPT,比如文心一言&a…

C语言:选择+编程(每日一练)

目录 选择题: 题一: 题二: 题三: 题四: 题五: 编程题: 题一:尼科彻斯定理 示例1 题二:等差数列 示例2 本人实力有限可能对一些地方解释和理解的不够清晰&…

【计算机视觉|生成对抗】逐步增长的生成对抗网络(GAN)以提升质量、稳定性和变化

本系列博文为深度学习/计算机视觉论文笔记,转载请注明出处 标题:Progressive Growing of GANs for Improved Quality, Stability, and Variation 链接:[1710.10196] Progressive Growing of GANs for Improved Quality, Stability, and Vari…

mac垃圾清理软件有哪些

随着使用时间的增加,mac系统会产生一些垃圾文件,影响系统的性能和稳定性。为了保持mac系统的高效,用户需要定期使用mac垃圾清理软件来清理系统缓存、日志、语言包等无用文件。CleanMyMac是一款功能强大的mac垃圾清理软件,它可以帮…

Python学习笔记_进阶篇(二)_django知识(一)

本章简介: Django 简介Django 基本配置Django urlDjango viewDjango 模板语言Django Form Django 简介 Django是一个开放源代码的Web应用框架,由Python写成。采用了MVC的软件设计模式,即模型M,视图V和控制器C。它最初是被开发来…

【Linux操作系统】详解Linux系统编程中的管道进程通信

在Linux系统编程中,管道是一种常用的进程间通信方式。它可以实现父子进程之间或者兄弟进程之间的数据传输。本文将介绍如何使用管道在Linux系统中进行进程通信,并给出相应的代码示例。 文章目录 1. 管道的概念2. 管道的创建和使用2.1 原型2.2 示例 3. 父…

keepalived集群

keepalived概述 keepalived软件就是通过vrrp协议来实现高可用功能。 VRRP通信原理 VRRP就是虚拟路由冗余协议,它的出现就是为了解决静态路由的单点故障。 VRRP是通过一种竞选一种协议机制来将路由交个某台VRRP路由器。 VRRP 用IP多播的方式(多播地…

HTTP与HTTPS的区别

面试常见问题,HTTPS优化总结易记版: 1、HSTS重定向技术:将http自动转换为https,减少301重定向 2、TLS握手优化:在TLS握手完成前客户端就提前向服务器发送数据 3、会话标识符:服务器记录下与某客户端的会…

学习笔记|按键原理|消抖|按键点灯的4种模式|STC32G单片机视频开发教程(冲哥)|第七集:按键点灯

文章目录 第六集(下)课后练习解答:SOS求救灯光编写求救信号原理冲哥代码及解析分模块设计:math.h:math.c:while主程序部分 按键点灯(下)1.按键的原理Tips:按键消抖 2.按键的代码实现…

创建一个简单的HTML Viewer应用程序

使用wxPython和内嵌浏览器来创建一个简单的HTML Viewer应用程序。 在本篇文章中,我们将使用Python和wxPython模块来创建一个简单的HTML Viewer应用程序。这个应用程序可以让用户输入HTML内容,并在内嵌浏览器中显示该内容的效果。 准备工作 在开始之前…

PCL 三维点云边界提取(C++详细过程版)

边界提取 一、概述二、代码实现三、结果展示本文由CSDN点云侠原创,爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、概述 点云边界提取在PCL里有现成的调用函数,具体算法原理和实现代码见:PCL 点云边界提取。为充分了解pcl::BoundaryEsti…

Centos7 配置Docker镜像加速器

docker实战(一):centos7 yum安装docker docker实战(二):基础命令篇 docker实战(三):docker网络模式(超详细) docker实战(四):docker架构原理 docker实战(五):docker镜像及仓库配置 docker实战(六):docker 网络及数据卷设置 docker实战(七):docker 性质及版本选择 认知升…

redis 发布和订阅

目录 一、简介 二、常用命令 三、示例 一、简介 Redis 发布订阅 (pub/sub) 是一种消息通信模式:发送者 (pub) 发送消息,订阅者 (sub) 接收消息。Redis 客户端可以订阅任意数量的频道。下图展示了频道 channel1 ,以及订阅这个频道的三个客户…

【Redis从头学-4】Redis中的String数据类型实战应用场景之验证码、浏览量、点赞量、Json格式存储

🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:Re…

爬虫逆向实战(六)--猿人学第四题

一、数据接口分析 主页地址:猿人学第四题 1、抓包 通过抓包可以发现数据接口是api/match/4 2、判断是否有加密参数 请求参数是否加密? 无请求头是否加密? 无响应是否加密? 响应数据无加密,但是返回的却是html代码…