vue异步更新dom的具体操作是什么,其原理如何理�

Admin 2022-07-05 群英技术资�

今天这篇给大家分享的知识是“vue异步更新dom的具体操作是什么,其原理如何理解�,小编觉得挺不错的,对大家学习或是工作可能会有所帮助,对此分享发大家做个参考,希望这篇“vue异步更新dom的具体操作是什么,其原理如何理解”文章能帮助大家解决问题�

Data对象:vue中的data方法中返回的对象�

Dep对象:每一个Data属性都会创建一个Dep,用来搜集所有使用到这个Data的Watcher对象�

Watcher对象:主要用于渲染DOM

Vue异步更新DOM的原�

Vue中的数据更新是异步的,意味着我们在修改完Data之后并不能立刻获取修改后的DOM元素�

1 什么时候能获取到真正的DOM元素�

  在Vue的nextTick回调中�

2 为什么Vue需要通过nextTick方法才能获取最新的DOM�

2.1 vue在调用Watcher更新视图时,并不会直接进行更新,而是把需要更新的Watcher加入到Queue队列里,然后把具体的更新方法flushSchedulerQueue 传给nexTick 进行调用�

// src > core > observer > watcher.js + scheduler.js// 当一� Data 更新时,会依次执行以下代�
// 1. 触发 Data.set
// 2. 调用 dep.notify
// 3. Dep 会遍历所有相关的 Watcher 执行 update 方法
class Watcher {
  // 4. 执行更新操作
  update() {
    queueWatcher(this);
  }
}

const queue = [];

function queueWatcher(watcher: Watcher) {
  // 5. 将当� Watcher 添加到异步队�
  queue.push(watcher);
  // 6. 执行异步队列,并传入回调
  nextTick(flushSchedulerQueue);
}

// 更新视图的具体方�
function flushSchedulerQueue() {
  let watcher, id;
  // 排序,先渲染父节点,再渲染子节点
  // 这样可以避免不必要的子节点渲染,如:父节点中 v-if � false 的子节点,就不用渲染�
  queue.sort((a, b) => a.id - b.id);
  // 遍历所� Watcher 进行批量更新�
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index];
    // 更新 DOM
    watcher.run();
  }
}

2.2 nextTick -- 将传入的flushSchedulerQueue 添加到callbacks 数组中,然后执行了timerFunc 方法�

const callbacks = [];
let timerFunc;

function nextTick(cb?: Function, ctx?: Object) {
  let _resolve;
  // 1.将传入的 flushSchedulerQueue 方法添加到回调数�
  callbacks.push(() => {
    cb.call(ctx);
  });
  // 2.执行异步任务
  // 此方法会根据浏览器兼容性,选用不同的异步策�
  timerFunc();
}

2.3 timerFunc方法 -- 是根据浏览器兼容性创建的一个异步方法,执行完该方法就会调用flushSchedulerQueue 方法进行具体的DOM更新�

let timerFunc;
// 判断是否兼容 Promise
if (typeof Promise !== "undefined") {
  timerFunc = () => {
    Promise.resolve().then(flushCallbacks);
  };
  // 判断是否兼容 MutationObserver
  // https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
} else if (typeof MutationObserver !== "undefined") {
  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);
  };
  // 判断是否兼容 setImmediate
  // 该方法存在一� IE 浏览器中
} else if (typeof setImmediate !== "undefined") {
  // 这是一个宏任务,但相比 setTimeout 要更�
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 如果以上方法都不知道,使� setTimeout 0
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

// 异步执行完后,执行所有的回调方法,也就是执行 flushSchedulerQueue
function flushCallbacks() {
  for (let i = 0; i < copies.length; i++) {
    callbacks[i]();
  }
}

2.4 完善逻辑判断

2.4.1 判断has 标识,避免在一个Queue 中添加相同的Watcher�

2.4.2 判断waiting 标识,让所有的Watcher 都在一个tick 内进行更新;

2.4.3 判断flushing 标识,处理Watcher 渲染时,可能产生的新Watcher�

  如触发了v-if 条件,新增的Watcher 渲染�

tip:nextTick 只是单纯通过Promise、setTimeout等方法模拟的异步任务�

3 为什么this.$nextTick 能够获取更新后的DOM�

  调用this.$nextTick 其实就是调用图中的nextTick 方法,在异步队列中执行回调函数。根据先进先出原则,修改Data 触发的更新异步队列会先得到执行,执行完成后就生成了新的DOM,接下来执行this.$nextTick 的回调函数时,能获取到更新后的DOM元素了�

// 我们使用 this.$nextTick 其实就是调用 nextTick 方法
Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this);
};

总结:vue异步更新的原�

修改 Vue 中的 Data 时,就会触发所有和这个 Data 相关� Watcher 进行更新。首先,会将所有的 Watcher 加入队列 Queue。然后,调用 nextTick 方法,执行异步任务。在异步任务的回调中,对 Queue 中的 Watcher 进行排序,然后执行对应的 DOM 更新�


“vue异步更新dom的具体操作是什么,其原理如何理解”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站,小编每天都会为大家更新不同的知识�
标签� vue异步更新dom

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部