分类：nextTick

2021
05-25

谈谈Vue中的nextTick

当数据发生变化之后，DOM视图并不会立即更新，如果我们在发生变化之后立马去获取某个节点或者某个节点的值，很有可能结果就是undefined；因为Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新；来看一个小demo：App.vue<template><divid="app"><divref="message">{{msg}}</div><divv-if="msg1">{{msg1}}</div><button@click="changeMsg">ChangetheMessage</button... 继续阅读 >

2021
05-23

Vue nextTick的原理解析

使用过Vue的小伙伴们都知道，Vue里的nextTick可以获取到更新后的DOM,今天我就来讲解下nextTick里面究竟做了什么？开始讲解前，我们需要知道了解一个概念，那就是EventLoopEventLoopEventLoop翻译过来就是事件循环,一个EventLoop会包括一个或多个task队列，持续线程会从队列中取出最早进入队列的任务进行执行，被取出的任务就叫做macroTask(宏任务),每个macroTask都有一个任务源,每个macroTask处理完之后就从队列中取出下一... 继续阅读 >

2021
01-26

Vue中的nextTick作用和几个简单的使用场景

目的理解下nextTick的作用和几个简单的使用场景正文起什么作用？在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。我想各位都知道或了解Vue的渲染流程，Vue在监听到数据变化后会重新渲染，配合VDOM更新真实的DOM，而nextTick的触发时机就是在调用方法后的第一次重新渲染完毕后。如何使用？有两种使用方法，一种是传入回调，另一种是Promise，官方使用示例如下：//修改数... 继续阅读 >

2020
12-27

浅析vue中的nextTick

背景vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可以实现整合操作。例子methods:{update(){for(leti=0;i<10;i++){this.testNum=this.testNum+i;}},},在你的Vue视图中，testNum会发生变化。不过需要注意的是这个变化的过程，虽然我们把firstNum循环修改了10... 继续阅读 >