$nextTick原理深度解析 (面试题)

这是一个Vue生命周期钩子

定义:Vue实现响应式并不是数据发生变化之后DOM立即变化,而是按照一定的策略来进行更新。this.$nextTick(回调函数)在下一次DOM更新结束后执行延迟回调,在修改数据之后使用$nextTick,可以获得回调中获取更新后的DOM。

说人话:当数据更新了,在DOM中渲染后,自动执行该函数

使用场景:

1、Vue生命周期的Created()钩子函数进行的DOM操作一定要放在this.$nextTick函数中,原因是create()钩子函数执行的时候,DOM其实并没有进行渲染,此时进行DOM操作没有用处,因此操作DOM一定要放在this.$nextTick函数中。

2、当更新数据的时候,想基于新的DOM进行一定操作时,要在nextTick所指定的回调函数中执行。

拓展提问:js的宏任务和微任务串起来考,回调函数中放置Promise 请说明执行顺序

官方文档:全局 API:常规 | Vue.js

你可能感兴趣的:(2023暑期面试,vue.js,javascript,前端)