首页 > 其他分享 >Vue面试题22:说一说Vue实例在挂载过程中发生了什么 (总结自B站up主‘前端杨村长’视频,仅供自用学习)

Vue面试题22:说一说Vue实例在挂载过程中发生了什么 (总结自B站up主‘前端杨村长’视频,仅供自用学习)

时间:2022-09-26 10:22:54浏览次数:58  
标签:初始化 面试题 Vue 函数 22 -- 更新 实例 组件

  • 挂载过程中完成了两件最重要的事:初始化(App实例的创建、数据状态的初始化、选项的处理、建立响应式数据等)建立更新机制,把这两件事说清除即可
  • 回答范例
    • 1.挂载过程指的是app.mount()过程,这是个初始化过程,整体上做了两件事:初始化和建立更新机制:
    • 2.初始化会创建组件实例、初始化组件状态、创建各种响应式数据;
    • 3.建立更新机制这一步会在app实例mount时立即执行一次组件更新函数,这会首次执行组件渲染函数并执行patch将前面获得Vnode转换为dom;同时首次执行渲染函数会创建它内部响应式数据和组件更新函数之间的依赖关系,也就是依赖收集的过程,会创建一个数据结构,将来数据变化时会根据这个结构找到相应的更新函数,重新执行更新函数,进而实现页面的更新,这就是所谓的更新机制的建立:源码层面的执行顺序:
      • createApp --> mount --> render --> patch --> processComponent --> mountComponent
      • mountComponent内部做三件事情:创建组件实例、初始化当前组件实例(setupComponent)、建立更新机制(setupRenderEffect),setupRenderEffect内部定义组件更新函数(componentUpdateFn),componentUpdateFn内部会继续执行渲染函数,递归执行patch,得到dom;

标签:初始化,面试题,Vue,函数,22,--,更新,实例,组件
From: https://www.cnblogs.com/Mochenghualei/p/16729983.html

相关文章

  • VUE2整合markdown
    下载node.js官网检查安装完成之后的版本信息安装vue环境安装淘宝镜像:npminstall-gcnpm--registry=https://registry.npm.taobao.org安装vue-cli脚手架c......
  • 针对CS最新XSS漏洞的详细研究--CVE-2022-39197
    针对CS最新XSS漏洞的详细研究--CVE-2022-39197本公众号技术文章仅供参考,未经允许,禁止转载!(某些逗比运营就别污染安全圈环境了)文章仅用于学习交流,请勿利用文章中的技术对......
  • Jenkins 20220925笔记本3
                                                 ......
  • golang面试题3
    go基础1、redis部署多节点模式,异步队列2、go-redis和redis-go//go-redis的连接模式,直连哨兵3、go异常处理,异常捕获方式,go里面替代try-catch如何操作4、gomaxprocs的默认......
  • 面试题1
    #第一题(列举了解的编程语言及语言的区别)编译型语言:一次性把代码都编译成二进制,然后运行解释型语言:实时性一行一行,编译一句,运行一句1.python解释型简洁高效,......
  • 不可错过的效能利器「GitHub 热点速览 v.22.39」
    如果你是一名前端工程师且维护着多个网站,不妨试试本周榜上有名的HTML-first的Qwik,提升网站访问速度只用一招。除了提升网站加载速度的Qwik,本周周榜上榜的Whisper也......
  • 2022前端面试官经常会考什么
    React中keys的作用是什么?render(){return(<ul>{this.state.todoItems.map(({item,i})=>{return<likey={i}>{item}</li>})}</......
  • 闲话 22.9.26
    闲话调全体T4六点改出来了,但大样例不认为我改出来了于是又花了两个小时修改不存在的错误最近在做这题[JRKSJR4]risrqnis想做主要是因为上琴糖但是做着做着发现很......
  • 计算机毕设选题推荐 springboot+vue二手车交易平台 ssm+vue二手车拍卖系统 二手车商城
    ......
  • vue懒加载图片插件
     1.安装npmivue-lazyload-S安装成功后 目前使用的版本是vue2.6的 2.引入  3.使用Vue.use(VueLazyLoad)       ,svg是加载时候的效果 ......