vue实例挂载过程

news2025/1/25 4:36:21

以下仅为个人见解。 

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前端面试 - 面试官系列

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

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

相关文章

解决IDEA tomcat控制台只有server日志

解决IDEA tomcat控制台只有server日志 确认tomcatxxx/conf/logging.properties文件是否存在,存在就会有。前提是在run configuration配置了打印多个日志

Bigemap Pro国产基础软件介绍——一款多源数据处理软件

一、软件简介 Bigemap Pro是由成都比格图数据处理有限公司(下称”BIGEMAP”)开发和发行的国产大数据处理基础软件。Bigemap Pro是在BIGEMAP GIS Office基础上,经过十年的用户积累与反馈和技术更新迭代出的新一代基础软件产品。Bigemap Pro国产基础软件集成了数据采…

判断平面中两射线是否相交的高效方法

1. 简介 最近在工作中遇到判断平面内两射线是否相交的问题。 对于这个问题的解决,常规的方法是将两条射线拓展为直线,计算直线的交点,而后判断交点是否在射线上。 这种方法,在思路上较为直观,也易于理解。然后,该方法在计算量上相对较大。对于少量射线间的交点计算尚可…

c语言——分别计算字符串中英文、空格、数字和其它符号的个数

//分别计算字符串中英文、空格、数字和其它符号的个数 #include<stdio.h> int main() {char c;int letters0,spaces0,digits0,others0;printf("输入字符&#xff1a;\n");while((cgetchar())!\n){if((c>a&&c<z)||(c>A&&c<Z))lette…

Python 矢量数据库和矢量索引:构建 LLM 应用程序

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可二次编辑的3D应用场景 由于使用其硬件创建的生成式AI应用程序&#xff0c;Nvidia经历了显着的增长。另一项软件创新&#xff0c;矢量数据库&#xff0c;也正在乘着生成式人工智能的浪潮。 开发人员正在向量数据库上用Pytho…

LocalDate,LocalDateTime,LocalTime开发中基本用法

LocalDate,LocalDateTime,LocalTime开发中基本用法 一 简要说明 package java.time; LocalDate 在ISO-8601日历系统中没有时区的日期&#xff0c;例如 2023-08-19。它是一个表示日期的不可变日期时间对象&#xff0c;常被视为年-月-日。其他日期字段&#xff0c;如年月日&…

UE4/5Niagara粒子特效之拖尾渐变

目录 开始操作 发射器一的制作 添加新的模块 ​编辑 让粒子长久存在 添加颜色 发射器二的制作 第三人称模板添加Niagara 效果 添加颜色 效果 隐藏第一个发射器 开始操作 首先创建一个粒子系统&#xff0c;用Fountain这个模板&#xff1a; 发射器一的制作 将不需要的…

vue上传图片并修改png图片颜色

场景 当涉及到在 Vue 中上传图片并修改 PNG 图片的颜色时&#xff0c;这个任务涵盖了文件上传、图像处理、Canvas 操作等多个方面 在现代 Web 开发中&#xff0c;图片的处理是常见的需求之一。本文将带您深入探讨如何使用 Vue.js 来实现图片上传&#xff0c;并在客户端使用 Can…

奖金丰厚 等你来拿!第六届开源创新大赛飞桨赛道下半场来啦

最近想要充个电&#x1f50b; 飞桨邀你开启开源贡献之旅 寻找那个最“会”的你 顶级开源项目、资深研发指导 高阶开发者合作交流 Buff 叠满&#xff01; 技能提升、丰富简历、高额奖金 你还不心动&#xff1f; 赛事简介 中国软件开源创新大赛已成功举办五届&#xff…

国企数字化办公实践: 泛微助力中国港湾用OA实现营销数字化管理

中国港湾工程有限责任公司(CHEC)成立于上世纪80年代&#xff0c;是世界500强企业中国交通建设股份有限公司(CCCC)的子公司&#xff0c;代表中国交建开拓海外市场。 目前&#xff0c;中国港湾在世界各地设有90多个分(子)公司和办事处&#xff0c;业务涵盖100多个国家和地区&…

网络游戏同步:状态同步核心原理剖析

状态同步是做网络游戏必然要掌握的一种服务端/客户端同步技术。什么是状态同步&#xff0c;具体到游戏中是如何实现的&#xff0c;带着这些问题本文将会从以下3个方面給大家详细的剖析状态同步。 对啦&#xff01;这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的零基础小…

【正点原子STM32连载】第十三章 按键输入实验 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html# 第十…

高忆管理:低位缩量上涨说明什么?

在股票商场中&#xff0c;股票价格在低位缩量上涨是一种常见的走势。那么&#xff0c;低位缩量上涨究竟阐明了什么&#xff1f;本篇文章将从多个角度剖析&#xff0c;并给出全文摘要和3个关键词。 一、什么是低位缩量上涨&#xff1f; 低位缩量上涨是指股票价格在前期低点的邻…

jenkins同一jar包部署到多台服务器

文章目录 安装插件配置ssh服务构建完成后执行 没有部署过可以跟这个下面的步骤先部署一遍&#xff0c;我这篇主要讲jenkins同一jar包部署到多台服务器 【Jenkins】部署Springboot项目https://blog.csdn.net/qq_39017153/article/details/131901613 安装插件 Publish Over SSH 这…

angular中如何定义一个全局组件?

需求&#xff0c;我们需要新建一个navBreadcrumb的全局组件。这是一个面包屑导航&#xff0c;在不同的页面引入时传入一个路由数组即可。 第一步&#xff1a;我们新建这个组件&#xff1a; ng g c navBreadcrumb ng g m navBreadcrumb----------nav-breadcrumb.module-------…

文件和目录的基础操作

cat命令 concatenate(连接)的缩写&#xff0c;即 combine pieces together 1&#xff09;把碎片组合在一起&#xff08;意味着可以使用cat创建一个小文件&#xff09; 2&#xff09;显示文件 ──(root㉿kali)-[~] └─# cat /etc/resolv.conf # Generated by NetworkManager…

数字孪生和SCADA有哪些区别?

虽然SCADA和数字孪生用于工业领域&#xff0c;但它们有不同的用途。SCADA专注于工业过程的实时监测和控制&#xff0c;而数字孪生用于模拟和分析系统的性能。接下来&#xff0c;让我们详细讨论SCADA和数字孪生&#xff08;SCADA与数字孪生&#xff09;之间的区别。 SCADA与数字…

Python Opencv实践 - 图像仿射变换

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR) rows,cols img.shape[:2] print(img.shape[:2])#使用getAffineTransform来获得仿射变换的矩阵M #cv.getAffineTransform(…

Java项目-苍穹外卖-Day04

公共字段自动填充 这些字段在每张表基本都有&#xff0c;手动进行填充效率低&#xff0c;且后期维护更改繁琐 使用到注解AOP主要 先答应一个AutoFill注解 再定义一个切面类进行通知 对应代码 用到了枚举类和反射 package com.sky.aspect; /*** 自定义切面类&#xff0c…

信创办公–基于WPS的EXCEL最佳实践系列 (公式和函数)

信创办公–基于WPS的EXCEL最佳实践系列 &#xff08;公式和函数&#xff09; 目录 应用背景相关知识操作步骤1、认识基本的初级函数2、相对引用&#xff0c;绝对引用&#xff0c;混合引用3、统计函数4、文本函数 应用背景 熟练掌握Excel的函数工具能让我们在日常的使用中更加方…