当前位置: 首页 > 面试题库 >

你知道nextTick的原理吗?

牛兴安
2023-03-14
本文向大家介绍你知道nextTick的原理吗?相关面试题,主要包含被问及你知道nextTick的原理吗?时的应答技巧和注意事项,需要的朋友参考一下

用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

Vue官网
提到DOM的更新是异步执行的,只要数据发生变化,将会开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。

简单来说,就是当数据发生变化时,视图不会立即更新,而是等到同一事件循环中所有数据变化完成之后,再统一更新视图。

关于异步的解析,可以查看阮一峰老师的这篇文章,具体来说,异步执行的运行机制如下。

(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。

(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

(4)主线程不断重复上面的第三步。

例子:

//改变数据
vm.message = 'changed'

//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'

//这样可以,nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到'changed'
})

那么,Vue内部是如何实现的呢?

可以了解一下哇 NextTick - 源码版 之 独立自身

 类似资料:
  • 本文向大家介绍你知道Virtual DOM的工作原理吗?相关面试题,主要包含被问及你知道Virtual DOM的工作原理吗?时的应答技巧和注意事项,需要的朋友参考一下 JSX经过编译后转成 createElement 语法,所有组件通过创建的 element 组成一个节点树就是 vdom 树。每次数据发生变化后,通过新生成的树与原来树进行对比(这个过程是边遍历边进行的,非前后行为)最终会生成新的树

  • 本文向大家介绍你知道koa的中间件原理吗?相关面试题,主要包含被问及你知道koa的中间件原理吗?时的应答技巧和注意事项,需要的朋友参考一下 如果一个koa中间件执行的时候,里面没有await next()的话,那么后面的中间件都不会执行。。 其实是支持普通函数的,不一定非得,可以如下使用 顺便贴下我的文章^_^ 若川:学习 koa 源码的整体架构,浅析koa洋葱模型原理和co原理

  • 本文向大家介绍你知道短链接的生成原理吗?相关面试题,主要包含被问及你知道短链接的生成原理吗?时的应答技巧和注意事项,需要的朋友参考一下 目的将长度较长的链接压缩成较短的链接,并通过跳转的方式,将用户请求由短链接重定向到长链接上去 1.二种方式生成短链 hash-可能会重复 发号器发号压缩 URL 2.短链跳转方式 301 - 用户第一次访问某个短链接后,如果服务器返回301状态码,则这个用户在后续

  • 本文向大家介绍你知道v-model的原理吗?说说看相关面试题,主要包含被问及你知道v-model的原理吗?说说看时的应答技巧和注意事项,需要的朋友参考一下 v-model只不过是一个语法糖而已,真正的实现靠的还是 v-bind:绑定响应式数据 触发 input 事件 并传递数据 (核心和重点)

  • 本文向大家介绍你知道vue中key的原理吗?说说你对它的理解相关面试题,主要包含被问及你知道vue中key的原理吗?说说你对它的理解时的应答技巧和注意事项,需要的朋友参考一下 便于Diff时更高效的进行节点查询对比。 有key时,通过生成的key与索引映射关系,直接通过新子节点的key查询是否存在于旧子节点序列中。 无key时,必须遍历旧子节点序列,依次与新子节点对比判断是否为新增节点。 参考up

  • 本文向大家介绍你知道style加scoped属性的用途和原理吗?相关面试题,主要包含被问及你知道style加scoped属性的用途和原理吗?时的应答技巧和注意事项,需要的朋友参考一下 用途:防止全局同名CSS污染 原理:在标签加上v-data-something属性,再在选择器时加上对应[v-data-something],即CSS带属性选择器,以此完成类似作用域的选择方式