总结vue相关面试题

最新推荐文章于 2024-11-13 11:52:56 发布

beifeng11996

最新推荐文章于 2024-11-13 11:52:56 发布

阅读量131

点赞数

文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/beifeng11996/article/details/126278130

版权

本文详细探讨了Vue.js的相关面试题目，涵盖了nextTick的使用和原理、Vue模板编译、设计模式、性能优化、Computed与Watch的区别、$nextTick的原理及应用场景，以及Vue的生命周期、Vue的MVVM模式等核心知识点，旨在帮助读者深入理解Vue.js的内部机制和最佳实践。

摘要由CSDN通过智能技术生成

nextTick 使用场景和原理

nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法

相关代码如下

let callbacks = [];
let pending = false;
function flushCallbacks() {
   
  pending = false; //把标志还原为false
  // 依次执行回调
  for (let i = 0; i < callbacks.length; i++) {
   
    callbacks[i]();
  }
}
let timerFunc; //定义异步方法  采用优雅降级
if (typeof Promise !== "undefined") {
   
  // 如果支持promise
  const p = Promise.resolve();
  timerFunc = () => {
   
    p.then(flushCallbacks);
  };
} else if (typeof MutationObserver !== "undefined") {
   
  // MutationObserver 主要是监听dom变化 也是一个异步方法
  let counter = 1;
  const observer = new MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
   
    characterData: true,
  });
  timerFunc = () => {
   
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
} else if (typeof setImmediate !== "undefined") {
   
  // 如果前面都不支持 判断setImmediate
  timerFunc = () => {
   
    setImmediate(flushCallbacks);
  };
} else {
   
  // 最后降级采用setTimeout
  timerFunc = () => {
   
    setTimeout(flushCallbacks, 0);
  };
}

export function nextTick(cb) {
   
  // 除了渲染watcher  还有用户自己手动调用的nextTick 一起被收集到数组
  callbacks.push(cb);
  if (!pending)