$nextTick的用法

2024-04-24 12:44:48

vm.$nextTick

参数： {Function} [callback]
用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
实例：

<template><div><p ref="msgp">{{msg}}</p><button @click="change">$nextTick</button></div>
</template><script>
export default {name: 'nextTick',data() {return {msg: '未更新'}},methods: {change() {// 修改数据this.msg = '被更新了'// DOM还没有更新console.log(this.$refs.msgp.innerHTML)this.$nextTick(() => {// DOM更新了console.log('$nextTick:' + this.$refs.msgp.innerHTML)})}},created() {}
}
</script>

DOM 的更新是异步的，也就是在数据变化之后，DOM不会立即更新，而是进入队列，等同一时间循环中的所有数据变化完成之后，再统一进行视图更新。
结论：
vue 中的 DOM 更新是异步的
$nextTick() 的应用场景

在vue的生命周期 created() 钩子函数中进行 dom 操作，一定要放在 $nextTick() 函数中执行。在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的代码放进 nextTick() 的回调函数中。
mounted() 钩子函数，因为该钩子函数执行时，所有的 DOM 挂载和渲染都已完成，此时在该钩子函数中进行任何 DOM 操作都不会有问题
在数据变化后要执行某个操作，而这个操作需要随数据改变而改变DOM结构时，这个操作都是需要放置 $nextTick() 的回调函数中。

最新文章

热门文章