MutationObserver – 判断vue Dom渲染完成

获取想要获取dom元素的宽高,打印出来的结果值一直小于DOM元素本身高度。查阅很多资料无果，初步判断是vue升级以后，this.$nextTick监听方式发生改变。更改方案，选择MutationObserver

Mutation Observer 是在DOM4中定义的，用于替代 mutation events 的新API，它的不同于events的是，所有监听操作以及相应处理都是在其他脚本执行完成之后异步执行的，并且是所以变动触发之后，将变得记录在数组中，统一进行回调的，也就是说，当你使用observer监听多个DOM变化时，并且这若干个DOM发生了变化，那么observer会将变化记录到变化数组中，等待一起都结束了，然后一次性的从变化数组中执行其对应的回调函数。

MutationObserver 作用

MutationObserver接口提供了监视对DOM树所做更改的能力。

语法：var observer = new MutationObserver(callback);
作用：DOM规范的MutationObserver()构造函数 - 是MutationObserver接口内容的一部分 - 创建并返回一个新的观察者，它在DOM事件触发时调用指定的回调函数。DOM的观察不会立即启动;而必须先调用observe() 方法来确定要监听哪一部分的DOM以及要注意哪些更改。
参数：回调函数拥有两个参数：一个是描述所有被触发改动的MutationRecord对象数组，另一个是调用该函数的MutationObserver 对象。（每当被指定的节点或子树以及配置项有Dom变动时会被调用）
返回值：一个新的、包含监听Dom变化回调函数的MutationObserver 对象

方法

官方文档提供三个方法来操作监听：

disconnect()
1.1 语法：mutationObserver.disconnect()
1.2 作用：告诉观察者停止观察变动。可以通过调用其observe()方法来重用观察者。
1.3 说明：阻止 MutationObserver 实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。
observe()
2.1 语法：mutationObserver.observe(target[, options])
2.2 作用：MutationObserver对象的回调方法以开始接收与给定选项匹配的DOM变化的通知。根据配置，这个观察者会观察DOM树中的单个Node，或者指定的节点及其某些或者所有的子孙节点。
2.3 说明：配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知。要停止这个MutationObserver （以便不再触发它的回调方法），需要调用MutationObserver.disconnect()方法。
takeRecords()
3.1 语法：mutationRecords = mutationObserver.takeRecords()
3.2 作用：从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到MutationRecord对象的新Array中。
3.3 说明：返回已检测到但尚未由观察者的回调函数处理的所有匹配DOM更改的列表，使变更队列保持为空。此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录，以便在停止观察者时可以处理任何未处理的更改。

应用实例

// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 选择目标节点
var target = document.querySelector('#some-id');
// 创建观察者对象
var observer = new MutationObserver(function(mutations) {  mutations.forEach(function(mutation) { console.log(mutation.type); //使用 mutation.type 获取发生的变动类别（无论是子节点的变动，还是节点属性的变动）。case 'childList':/* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与mutation.removedNodes */break;case 'attributes':/* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，该属性之前的值为 mutation.oldValue */break;});
});
// 配置观察选项:
var config = {subtree: true, //Boolean - 目标以及目标的后代改变都会观察attributes: true, //检测属性变动childList: true,  //观察目标子节点的变化，添加或者删除characterData: true
}
// 传入目标节点和观察选项
observer.observe(target, config);
// 停止观察
observer.disconnect();

MutationObserver -- 判断vue Dom渲染完成相关推荐

[vue] DOM渲染在哪个周期中就已经完成了？
[vue] DOM渲染在哪个周期中就已经完成了? mounted生命周期个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面 ...
vue 组件第一次不渲染问题_解决vue页面渲染但dom没渲染的操作
我就废话不多说了,大家还是直接看代码吧~ this.$nextTick(() => { $("select[name='ddlCostCenter']").select2({ ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
angular监听图片加载完成_angular监听dom渲染完成，判断ng-repeat循环完成
一.前言最近做了一个图片懒加载的小插件,功能需要dom渲染完成后,好获取那些需要懒加载的dom元素.那么问题来了,如果只是感知静态的dom用ready,onload都可以,但项目用的angular, ...
5渲染判断_Vue页面渲染中key的应用实例教程
引言在前端项目开发过程中,el-table展示的结果列使用组件形式引入,其中某些字段通过:formatter方法转码,结果栏位的字段显示/隐藏控制也使用组件形式引入,前端在控制字段显示属性时,发现码 ...
Vue 页面渲染的流程
前言在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...
Vue 条件渲染列表绚烂双向数据处理
Vue 条件渲染列表绚烂双向数据处理文章目录 Vue 条件渲染列表绚烂双向数据处理 1.style和class 2.条件渲染 3.列表渲染 3.1.v-for 循环数组,循环字符串,数字对象 ...
vue_SSR框架：搭好的Vue服务器渲染框架，用vue做网站开发、做seo的首选。
前端江太公搭好的Vue服务器渲染框架,用vue做网站开发.做seo的首选最成熟的Vue ssr框架,一个命令就能启动和部署.零侵入开发,跟开发vue纯客户端一模一样. 体验优秀成熟的ssr框架使 ...
vue首次渲染全过程
昨天有朋友问我vue在页面第一次加载时到底做了些什么,看来这个问题在很多朋友心中可能还比较模糊,今天我们一起来详细的看看vue的首次渲染过程 vue源码下载地址:vue源码了解vue首次渲染全过程, ...

MutationObserver -- 判断vue Dom渲染完成

MutationObserver

MutationObserver – 判断vue Dom渲染完成

MutationObserver 作用

方法

应用实例

MutationObserver -- 判断vue Dom渲染完成相关推荐

最新文章

热门文章