前端面试题 - Vuevue工作机制、Vue源码解析、Vue面试题、Vue原理
发布于 1 个月前 作者 webdashen 186 次浏览 来自 面试宝典

vue基本工作机制

初始化

  • new vue()
  • 内部执行了一个初始化方法,它做的就是一些最基础的东西的初始化
    • 比如说初始化生命周期,我们知道有很多生命周期的钩子
    • 还有一些props,还有我们一些数据data的响应化等
    • 其中最重要的是通过object.defineProperty设置getter和setter函数,用来实现响应式以及依赖收集

$mount

在初始化之后调用$mount来执行挂载函数,我们知道Vue的初始化就是通过$mount来实现的,$mount其实就是要指定一个挂载节点,可能会是一个目标节点,也有可能会是一个dom节点,最终就是告诉我们vue将把那些写好的模板通过编译以后达到更新以后这个最新的东西 我到底要显示在什么地方,就是$mount最终指定的那个目标

后续

  • 然后$mount会启动这个编译器compile,这个编译器最重要的事情就是对我们的Template里的东西进行一遍扫描,做parse optimize generate这三件事
  • compile在这个阶段会生成一些渲染函数或者也可以叫更新函数,会生成一颗树,我们叫虚拟节点树,将来在做数据更新的时候,其实我们改变的数据并不是真正的dom操作,而是这个虚拟dom上的数值,当我们准备更新之前我们会做一个diff算法的比较,通过最新的值和之前的老值进行比较,从而计算出我们应该做的最小的dom更新
  • 然后我们才开始执行到这个patch步骤来打补丁做界面更新,这样儿做的目的是用js里面的计算时间来换dom操作时间,我们知道浏览器的瓶颈在对页面操作这一块儿比较耗时间
  • Vue的核心在于减少页面渲染的次数和数量,compile除了编译渲染函数之外,还会做一个依赖收集的工作,通过这个依赖收集我们可以知道当页面数据发生变化的时候我应该去更新页面中的那一个dom节点,这也就是将来这个数据发生变化的时候,我们可以通过这个watcher观察者来知道数据发生变化,这时候调用更新渲染函数来打补丁。

参考来源:https://www.jianshu.com/p/60d9452f8c52

回到顶部