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

  • 挂载过程中完成了两件最重要的事:初始化(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;
posted @ 2022-09-26 10:14  Mochenghualei  阅读(566)  评论(0)    收藏  举报