$nextTick与原生js先渲染dom再执行函数的方式

$nextTick与原生js先渲染dom再执行函数的方式

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。

vue的$nextTick

简述

Vue.js 的 $nextTick 方法是用于在 DOM 更新后执行延迟回调的方法。

当 Vue.js 更新 DOM 后，有时候需要执行一些操作（如获取更新后的 DOM 元素的位置等），但是这些操作必须在 DOM 更新后才能执行，否则可能得到不准确的结果。这时候就可以使用 $nextTick 方法，将要执行的操作放到 $nextTick 的回调函数中，Vue.js 会在下次 DOM 更新完成之后执行该回调函数。

$nextTick 方法可以通过 Vue 实例及组件实例的实例方法调用，例如：

需要注意的是，$nextTick 方法是异步执行的，因此不能保证在下一帧立即执行，但是它会在 Vue.js 内部的 DOM 更新队列被清空后执行。

原生jsDOM渲染完成再执行回调

简述

在 JavaScript 中，可以使用 window.onload 或 document.addEventListener('DOMContentLoaded', callback) 方法来确保 DOM 元素已经被完全加载和渲染。这两种方法都会在 DOM 加载完成后执行回调函数。

window.onload 事件会等待页面所有资源（包括图片、视频等）加载完成后才执行回调函数。示例代码如下：

window.onload = function() {
    
      
   // 在这里编写需要在 DOM 加载后执行的代码
}

document.addEventListener('DOMContentLoaded', callback) 方法则会在 DOM 加载完成后立即执行回调函数，不必等待所有资源的加载完成。示例代码如下：

document.addEventListener('DOMContentLoaded', function() {
    
      
   // 在这里编写需要在 DOM 加载后执行的代码
})

需要注意的是，在使用 document.addEventListener('DOMContentLoaded', callback) 方法时，要确保它在window.onload事件之前被触发，否则可能会导致回调函数无法执行。