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/watch
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(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中定义的_render
      vm._update(vm._render(), hydrating)
    }

5.Vue.prototype.render方法

主要是生成VNode

6.Vue.prototype.update方法

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

参考:

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

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

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

相关文章

前端node.js入门-前端工程化与模块化

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 Node.js 入门 什么是 Node.js? 什么是前端工程化? Node.js 为何能执行 JS&…

神经网络基础-神经网络补充概念-08-逻辑回归中的梯度下降算法

概念 逻辑回归是一种用于分类问题的机器学习算法,而梯度下降是优化算法,用于更新模型参数以最小化损失函数。在逻辑回归中,我们使用梯度下降算法来找到最优的模型参数,使得逻辑回归模型能够更好地拟合训练数据。 逻辑回归中的梯…

C语言——通讯录详解(动态版)

通讯录详解 前言:一、定义一个通讯录二、初始化三、增加联系人3.1 给通讯录扩容3.2增加联系人 四、释放内存五、完整代码 前言: 我们已经学过了通讯录的静态版,但是它的缺点很明显,通讯录满了就添加不了联系人了啦。我再让通讯录升…

山东布谷科技直播软件源码Nginx服务器横向扩展:搭建更稳定的平台服务

在直播软件源码平台中,服务器扮演着重要的角色,关系着视频传输、数据处理、用户管理等工作的顺利完成。随着互联网的迅猛发展,直播行业也随之崛起,全世界的人们都加入到了直播软件源码平台中,用户流量的增加让服务器的…

Mac鼠标增强工具Smooze Pro

Smooze Pro是一款Mac上的鼠标手势增强工具,可以让用户使用鼠标手势来控制应用程序和系统功能。 它支持多种手势操作,包括单指、双指、三指和四指手势,并且可以自定义每种手势的功能。例如,您可以使用单指向下滑动手势来启动Expos视…

web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程

文章目录 前言一、点聚合是什么?二、开发前准备三、API示例1.引入高德地图2.创建地图实例3.添加标点4.删除标点5.删除所有标点(覆盖物)6.聚合点7.自定义聚合点样式8.清除聚合9.打开窗体信息 四、实战开发需求要求效果图如下:封装思…

pdf怎么合并在一起?这几个合并方法了解一下

pdf怎么合并在一起?在日常工作、学习和生活中,我们常常会遇到需要将多个PDF文件合并成一个文件的情况。比如,在学术论文写作中,我们可能需要将多篇论文合并成一个文件进行打印和提交。在工作中,我们可能需要将多个报告…

记录每日LeetCode 617.合并二叉树 Java实现

题目描述: 给你两棵二叉树: root1 和 root2 。 想象一下,当你将其中一棵覆盖到另一棵之上时,两棵树上的一些节点将会重叠(而另一些不会)。你需要将这两棵树合并成一棵新二叉树。合并的规则是:…

如何从cpu改为gpu,pytorch,cuda

1.cmd输入nvcc -V 2.得到 cuda版本后,去pytorch官网 3.根据自己的cuda进行选择 4.复制上述链接,进入cmd 5.cmd中输入activate XXX,这里的"XXX"指代自己在工程中用到的环境 6.进入后,将刚才链接粘贴,回车等待下载结束 …

文心一言 VS 讯飞星火 VS chatgpt (76)-- 算法导论7.3 1题

一、如果用go语言,为什么我们分析随机化算法的期望运行时间,而不是其最坏运行时间呢? 文心一言: 在分析算法的性能时,期望运行时间是一个重要的指标,它描述了算法在平均情况下的表现。期望运行时间考虑了所有可能的…

spring(15) SpringBoot启动过程

目录 一、过程简介二、过程流程图三、源码分析1、运行 SpringApplication.run() 方法2、确定应用程序类型3、加载所有的初始化器4、加载所有的监听器5、设置程序运行的主类6、开启计时器7、将 java.awt.headless 设置为 true8、获取并启用监听器9、设置应用程序参数10、准备环境…

韦东山-电子量产工具项目:UI系统

代码结构 所有代码都已通过测试跑通,其中代码结构如下: 一、include文件夹 1.1 common.h #ifndef _COMMON_H #define _COMMON_Htypedef struct Region {int iLeftUpX; //区域左上方的坐标int iLeftUpY; //区域左下方的坐标int iWidth; //区域宽度…

安防监控视频云存储EasyCVR平台H.265转码功能更新:新增分辨率配置

安防视频集中存储EasyCVR视频监控综合管理平台可以根据不同的场景需求,让平台在内网、专网、VPN、广域网、互联网等各种环境下进行音视频的采集、接入与多端分发。在视频能力上,视频云存储平台EasyCVR可实现视频实时直播、云端录像、视频云存储、视频存储…

从零做软件开发项目系列之一综论软件项目开发

1 引言 有一个三个泥瓦匠的故事。 三个泥瓦匠在砌墙,一个人走过来,问他们在干什么。   第一个泥瓦匠没好气地说,你没看见吗?我在辛苦地砌墙呢。   第二个回答,我们正在建一座高楼。   第三个则洋溢着喜悦说&…

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)

文章目录 filter 滤镜blur() 模糊度例子 渐变光晕 brightness() 元素亮度contrast() 对比度grayscale() 元素灰度hue-rorate() 色相opacity() 透明度invert() 反转颜色saturate() 饱和度 backdrop-filter 蒙版,滤镜例子 卷轴展开 filter 滤镜 动图为效果添加前后对…

开源了一套基于springboot+vue+uniapp的商城,包含分类、sku、商户管理、分销、会员、适合企业或个人二次开发

RuoYi-Mall-JAVA商城-电商系统简介 开源了一套基于若依框架,SringBoot2MybatisPlusSpringSecurityjwtredisVueUniapp的前后端分离的商城系统, 包含分类、sku、商户管理、分销、会员、适合企业或个人二次开发。 前端采用Vue、Element UI(ant…

视频汇聚/视频云存储/视频监控管理平台EasyCVR添加萤石云设备详细操作来啦!

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

贝锐蒲公英助力电子公交站牌联网远程运维,打造智慧出行新趋势

在现代城市公共交通系统中,我们随处可见电子公交站牌的身影。作为公共交通服务的核心之一,电子公交站牌的稳定运行至关重要,公交站台的实时公交状况、公共广告信息,是市民候车时关注的焦点。 某交通科技公司在承接某市智能电子站牌…

MR300C工业无线WiFi图传模块 内窥镜机器人图像传输有线无线的两种方式

MR300C无线WiFi图传模使用方法工业机器人图像高清传输 ⚫ MR300C图传模块基于MIPS处理器实现,电脑/手机连接模块的WIFI热点或网口即可查看视频流 ⚫ 模块的USB 2.0 Host接口,可接入USB uvc摄像头/内窥镜默认输出的视频格式必须是MJPG ⚫ 模块支持接入摄…

Python绘图系统6:自定义坐标列表控件

文章目录 自定义坐标列表控件显示和隐藏加载按钮坐标设置控件的显示和隐藏源代码 Python绘图系统: 基础:将matplotlib嵌入到tkinter 📈简单的绘图系统 📈数据导入📈三维绘图系统自定义控件:坐标设置控件&a…