vue3语法糖中nextTick用法
时间: 2023-07-28 10:07:51 浏览: 125
Vue中this.$nextTick的作用及用法
5星 · 资源好评率100%
在 Vue 3 中,`nextTick` 依然是用来在 DOM 更新之后执行回调函数的语法糖,不过使用方式有所变化。
在 Vue 2 中,我们可以通过 `this.$nextTick()` 或 `Vue.nextTick()` 来使用 `nextTick`,而在 Vue 3 中,`nextTick` 被移到了 `@vue/runtime-core` 模块中,需要手动导入后使用。
具体使用方式如下:
```javascript
import { nextTick } from 'vue'
// 在组件内使用
export default {
mounted() {
nextTick(() => {
// 在 DOM 更新后执行
})
}
}
// 在普通函数中使用
function someFunction() {
nextTick(() => {
// 在 DOM 更新后执行
})
}
```
需要注意的是,由于 `nextTick` 是基于 Promise 实现的,因此在使用过程中也可以使用 async/await 等 Promise 相关语法。
阅读全文