vue常见面试问题

salvatore
139 阅读4分钟

说一下vue是如何实现数据响应的（MVVM的实现）

  1. vue使用observer来劫持每个对象的属性，其原理，vue2使用的是Object.defineProptory，而vue3使用的是Proxy
  2. 使用Dep通过dep.depend()来收集依赖，在initData、initProps、以及watch、computed时候来收集render函数依赖的属性和数据（get阶段），在数据set阶段dep发现发生变化，调用dep,notify()来通知render函数渲染，以及watch回调
  3. 通过scheduler实现高效调用，实质就是将修改放在一个微任务里面去执行，实际上就是nextTick，所以我们在vue中一般为了确保dom更新完成会调用nextTick来实现

Proxy和Object.defineProptory的区别

template到render函数经历了哪些事情（template是怎么编译成render函数的）

一共3个阶段

  1. parse：
    • 通过正则匹配生成AST抽象语法树
  2. optimize：
    • 标记节点是否为静态节点，主要判断是否有v-if、v-for、bind属性等指令
  3. generate：
    • 将AST抽象语法树进行词法和语法分析
    • 生成虚拟dom树，其中包含了节点信息等

vue3对比vue2通过哪些方面来提升性能的

  1. 静态提升
    • 区分静动态节点和属性，将静态节点和静态属性提升
  2. 预字符串化
    • 连续大量的静态模版预字符串化，通过createStaticVnode方法
  3. 缓存时间处理函数
    • 时间添加cache，因为时间处理不会发生变化
  4. Block Tree
    • 主要在patch阶段，编译时候对每一个节点进行标记为动态节点还是静态节点
    • 将动态节点记录在根节点，也就是block节点
    • 在运行时候只对动态节点进行比较，这样就不会涉及到静态节点的比较
  5. PatchFlag
    • 主要针对对比某一个节点
    • 记录单个节点哪些是动态的，每次只比较动态的节点，例如text、class等

说说你对diff的理解（包含patch的过程)

  1. diff的时机
    • 当组件初始化或者有数据更新的回收，会执行对应的函数，函数主要做两件事情
      • 运行_render的时候
      • 运行_update的时候
    • diff的时机就发生在update的运行过程中
  2. update函数做了哪些事情
    • 先对虚拟dom赋值this._vnode(老的dom) = vnode(传入的新的dom)
    • 更新真实dom的的过程叫diff，算法就是patch算法
  3. patch算法的过程
    • 如果旧树没有节点（也就是第一次的时候），直接用新的vnode形成一个树来渲染真实dom，挂载到节点
    • 如果旧树存在，patch主要做两件事，1. 完成所有真实dom的最小化处理 ；2. 将新树的对应到合适的真实dom
    • 先判断根节点是否为相同（tag类型相同、key相同）的节点，如果不相同直接创建新的节点，旧的节点直接remeve掉
    • 如果相同的情况，更新根节点的其他属性，有变化的更新到真实的dom中
    • 然后对比子节点，新旧的数组头尾双指针遍历，两个比较如果没有相同
    • 如何比较新旧数组的过程（双指针向中间遍历的过程）
      • 先比较两个头指针，如果相同替换，如不相同
      • 比较两个尾指针，相同移动真实的dom尾部元素，如不相同
      • 比较头尾，尾头，有相同移动元素替换，没有移动指针序号

key的好处

没有key比较元素相同，会大量反复的修改子元素，存在大量dom重排重绘

例如：如果头部插入，没有key值，进行逐个元素修改，如果有key只是添加一个元素，后面的通过移动就可以完成

对nextTick的理解

nextTick可以传入一个回调函数，该回调回调函数会被放入到vue运行时的微队列的中去，等到dom执行完成之后调用nextTick，nextTick实现优先使用MutationObserver，如果不支持MutationObserver则使用setImmediate（主要在IE10支持），如果不支持，则使用setTimeout

vue和react的区别的理解

  1. vue是数据双向绑定，react是数据单向流
  2. vue是渐进式的，react是侵入式的推荐使用jsx编写
  3. vue不会重新渲染整棵树，react如果不加干预会重新刷新整个组件

vuex和pinia的区别、优缺点

  • vuex优点：
    • 生态更成熟，使用过的业务场景更丰富
    • 上手成本低
  • pinia优点：
    • 体积更小
    • 不再有mutation，都用actions去实现
    • 支持多实例，不再需要modules去管理
    • 更好的支持ts
    • composition api维护更方便
avatar
文章
阅读
粉丝