$nextTick与原生js先渲染dom再执行函数的方式
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事件之前被触发，否则可能会导致回调函数无法执行。
