vue实例挂载过程
以下仅为个人见解。
1.大致流程:
- new Vue()时会调用initMixin(Vue)将_init挂载到vue原型上;
- 在_init()中调用$mount()方法($mount()方法也是挂载到vue原型上的)编译template模版,并生成render()函数;
- 挂载到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前端面试 - 面试官系列
相关文章:
vue实例挂载过程
以下仅为个人见解。 1.大致流程: new Vue()时会调用initMixin(Vue)将_init挂载到vue原型上;在_init()中调用$mount()方法($mount()方法也是挂载到vue原型上的)编译template模版,并生成render()函数;挂载到vm上后,会…...
【第八讲---视觉里程计2】
在图像中提取特征点并计算特征描述,非常耗时 通过计算描述子距离在不同图像中寻找特征匹配,也非常耗时 利用通过匹配点信息计算相机位姿,没什么问题 我们可以采用以下方法进行改进: 光流:通过其他方式寻找匹配点直接法…...
设置PHP的fpm的系统性能参数pm.max_children
1 介绍 PHP从Apache module换成了Fpm,跑了几天突然发现网站打不开了。 页面显示超时,检查MySQL、Redis一众服务都正常。 进入Fpm容器查看日志,发现了如下的错误信息: server reached pm.max_children setting (5), consider r…...
vue3setup标签语法 + vite + delfin 递归组件实现无限评论功能
1、 功能效果 在线预览:https://szhihao.gitee.io/comment/ gitee仓库地址:https://gitee.com/szhihao/comment 2、实现的具体技术点 根据不同的人名可以进行评论(tap切换) 对进行的评论可以无限进行回复(递归组件和…...
optee中如何开启或关闭所有中断的
我们知道在Linux Kernel中开启或关闭中断的函数是:local_irq_enable()和local_irq_disable(), 那么在optee os中是怎样做到的呢? optee中通过使用thread_mask_exceptions()和thread_unmask_exceptions()来开启或关闭中断。 thread_mask_exceptions()和thread_unmask_excepti…...
基于STM32+微信小程序设计的宠物投喂装置(腾讯云IOT)
一、设计需求 【1】 项目背景 社会经济的飞速发展与城市化进程的加速,城市市民家庭的封闭化和人口老龄化的情况日益突出,基于人们的情感寄托与休闲消费的需要,中国的宠物产业也悄然兴起。家庭宠物的饲养成为了城市居民生活消遣的新方式。宠物的喂养和看护往往是宠物主人最…...
2023年上半年软考分数线 软考分数线公布时间
2023年上半年软考分数线: 全国标准为45分,部分地区会有省考分数线。 计算机软考的及格分数线并不是固定的,就像2016年上半年中级信息系统管理工程师考试,上午的基础知识科目及格标准是45分,下午的应用技术科目及格标…...
centos7的flink安装过程
安装步骤 下载flink的tar.gz包修改flink的conf配置下载需要的lib包 具体代码(以flink1.15为例) # 下载flink的tar.gz包 wget https://archive.apache.org/dist/flink/flink-1.15.4/flink-1.15.4-bin-scala_2.12.tgz tar -zxvf flink-1.15.4-bin-scala…...
商城-学习整理-高级-性能压测缓存问题(十一)
目录 一、基本介绍1、性能指标2、JMeter1、JMeter 安装2、JMeter 压测示例1、添加线程组2、添加 HTTP 请求3、添加监听器4、启动压测&查看分析结果 3、JMeter Address Already in use 错误解决 二、性能监控1、jvm 内存模型2、堆3、jconsole 与 jvisualvm1、jvisualvm 能干…...
PHP 三元 !empty 而不是评估为真或假 可用isset()
是否可以使用速记三元来检查变量是否已设置,而不是是否计算结果为零或非零? 例如,我试过: $var 0; echo (string) $var ?: (string) false ?: 2;但由于前两个表达式的计算结果均为“0”或“false”,因此显示为 2。…...
星火大模型 VS FuncGPT(慧函数), 谁更胜一筹?
哈喽,本文即通过相近的试题,看下最近爆火的科大讯飞星火大模型和 FuncGPT(慧函数)的编码能力有何区别,给大家直观地对比。 开发过程中经常会遇到读取文件内容的情况,需要【判断文件路径是目录还是文件】&am…...
使用 Python 获取 Redis 数据库中的所有键
如果你了解 JSON,就会熟悉 Redis 设计系统。 它使用键值结构和分布式内存方法来实现弹性数据库。 哈希、列表、集合、排序集合、字符串、JSON 和流是 Redis 支持的众多数据结构之一。 这个开源数据库支持不同的语言,包括 Python,如果您正在使…...
C的进阶C++学习方向
(꒪ꇴ꒪ ),Hello我是祐言QAQ我的博客主页:C/C语言,Linux基础,ARM开发板,软件配置等领域博主🌍快上🚘,一起学习,让我们成为一个强大的攻城狮!送给自己和读者的…...
【仿写框架之仿写Tomact】二、初始化阶段加载项目中所有servlet类对象
文章目录 1、自定义MyWebServlet 注解2、创建HttpServlet文件3、加载项目中的所有以.java结尾的文件4、收集项目中带有MyWebServlet 的类对象 1、自定义MyWebServlet 注解 我们知道,tomcat是依据WebServlet注解去收集所有servlet类的。 import java.lang.annotati…...
Linux实用运维脚本分享
Linux实用运维脚本分享🍃 MySQL备份 目录备份 PING查询 磁盘IO检查 性能相关 进程相关 javadump.sh 常用工具安装 常用lib库安装 系统检查脚本 sed进阶 MySQL备份 #!/bin/bashset -eUSER"backup" PASSWORD"backup" # 数据库数据目录…...
JMeter 特殊组件-逻辑控制器与BeanShell PreProcessor 使用示例
文章目录 前言JMeter 特殊组件-逻辑控制器与BeanShell PreProcessor 使用示例1. 逻辑控制器使用1.1. While Controller 使用示例1.2. 如果(If)控制器 使用示例 2. BeanShell PreProcessor 使用示例 前言 如果您觉得有用的话,记得给博主点个赞…...
时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测
时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测 目录 时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测 程序设计 完整…...
Ubuntu 连接海康智能相机步骤(亲测,成功读码)
ubuntu20.04下连接海康智能相机 Ubuntu 连接海康智能相机步骤(亲测,已成功读码)输出的结果 Ubuntu 连接海康智能相机步骤(亲测,已成功读码) (就是按照海康的提供的步骤和源码连接相机,流水账) 安装Ubuntu20.04安装gcc和g,IDmvs只…...
sass笔记
声明变量 通过$标识符进行命名及引用混合器 类似vue中的函数 通过 mixin标识定义 include 标识调用& 父选择器标识extend 进行继承可嵌套可导入 通过 import 文件位置’ 、进行导入 <style> //1 声明变量 $name: 15px; $color: skyblue;mixin border-radius($num) {/…...
C/C++中volatile关键字详解
1. 为什么用volatile? C/C 中的 volatile 关键字和 const 对应,用来修饰变量,通常用于建立语言级别的 memory barrier。这是 BS 在 "The C Programming Language" 对 volatile 修饰词的说明: A volatile specifier is a hint to a…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录,不允许匿名访问,kefu只能访问/data/kefu目录,不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
