当前位置: 首页 > news >正文

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.lryc.cn/news/129863.html

相关文章:

  • 【第八讲---视觉里程计2】
  • 设置PHP的fpm的系统性能参数pm.max_children
  • vue3setup标签语法 + vite + delfin 递归组件实现无限评论功能
  • optee中如何开启或关闭所有中断的
  • 基于STM32+微信小程序设计的宠物投喂装置(腾讯云IOT)
  • 2023年上半年软考分数线 软考分数线公布时间
  • centos7的flink安装过程
  • 商城-学习整理-高级-性能压测缓存问题(十一)
  • PHP 三元 !empty 而不是评估为真或假 可用isset()
  • 星火大模型 VS FuncGPT(慧函数), 谁更胜一筹?
  • 使用 Python 获取 Redis 数据库中的所有键
  • C的进阶C++学习方向
  • 【仿写框架之仿写Tomact】二、初始化阶段加载项目中所有servlet类对象
  • Linux实用运维脚本分享
  • JMeter 特殊组件-逻辑控制器与BeanShell PreProcessor 使用示例
  • 时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测
  • Ubuntu 连接海康智能相机步骤(亲测,成功读码)
  • sass笔记
  • C/C++中volatile关键字详解
  • Linux:shell脚本:基础使用(4)《正则表达式-grep工具》
  • 如何建立单元测试
  • typeScript 接口和类
  • 这项与越来越多企业有关的行业标准,网易云信深度参与制定!
  • C语言,malloc使用规范
  • 广度优先遍历与最短路径(Java 实例代码源码包下载)
  • 南大通用数据库(Gbase 8s) 创建UDR外部函数
  • 步入React正殿 - State进阶
  • 【QT+ffmpeg】QT+ffmpeg 环境搭建
  • 责任链模式解决多个ifelse问题
  • Lnton羚通关于PyTorch的保存和加载模型基础知识