vue异步更新dom的具体操作是什么,其原理如何理�
Admin 2022-07-05 群英技术资�
Dep对象:每一个Data属性都会创建一个Dep,用来搜集所有使用到这个Data的Watcher对象�
Watcher对象:主要用于渲染DOM
Vue中的数据更新是异步的,意味着我们在修改完Data之后并不能立刻获取修改后的DOM元素�
在Vue的nextTick回调中�
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等方法模拟的异步任务�
调用this.$nextTick 其实就是调用图中的nextTick 方法,在异步队列中执行回调函数。根据先进先出原则,修改Data 触发的更新异步队列会先得到执行,执行完成后就生成了新的DOM,接下来执行this.$nextTick 的回调函数时,能获取到更新后的DOM元素了�
// 我们使用 this.$nextTick 其实就是调用 nextTick 方法 Vue.prototype.$nextTick = function (fn: Function) { return nextTick(fn, this); };
修改 Vue 中的 Data 时,就会触发所有和这个 Data 相关� Watcher 进行更新。首先,会将所有的 Watcher 加入队列 Queue。然后,调用 nextTick 方法,执行异步任务。在异步任务的回调中,对 Queue 中的 Watcher 进行排序,然后执行对应的 DOM 更新�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
我们都知道form表单中有一个默认的reset重置表单事件,你一定会很熟悉,后面我也会对reset事件使用详细解释,请先看下面的代码� inputtype=reset 为什么有了reset按钮了,我们还要使用js或jquery来实现reset事件呢?这是因为有时候我们form表单提交完数据之
本文的行文思路是编写敏感词检测代码,前两个思路未采用组件化的开发思想,后三个思路根据需求变更,采用组件化的思想和mixins混入进行开发�
vue-router是Vue.js官方的路由插�,它和vue.js是深度集成的,适合用于构建单页面应�,下面这篇文章主要给大家介绍了关于降低vue-router版本�2种解决方�,文中通过实例代码介绍的非常详�,需要的朋友可以参考下
JavaScript原型模式是指什么?JavaScript原型模式是JavaScript设计模式中的一种,本文也主要介绍JavaScript原型模式的实现,接下来我们就一起来学习一下JavaScript原型模式吧�
JavaScript实现音乐播放� 本文实例为大家分享了vue + element ui实现锚点定位的具体代�,供大家参�,具体内容如下 效果 HTML代码 <!--播放�--> <div id="player"> <!--播放控件--> <div id="playerControl"> <div class="playerImg"> <img src ...
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078