其他分享
首页 > 其他分享> > vue中的nextTick实现局部刷新

vue中的nextTick实现局部刷新

作者:互联网

vue中的nextTick

今天在开发过程中我又遇到了很神奇的东西

在vue中使用nextTick没有效果

促使我去查了一下这个api的用法

才发现我一直都在"乱用"和"滥用"这个nextTick

我们先来看一下vue文档中对nextTick的解析

在这里插入图片描述
这里首先我们第一个看明白的是vue更新DOM时,是异步的。可以看一下我下面的这个局部div刷新的小例子

<div v-if="isAlive" >{{msg}}</div>
data(){
	return:{
		msg:"内容",
		isAlive:true
	}
}

//这里就直接写方法了
reload(){
	// 条件渲染,让div销毁
	this.isAlive = false
	// 条件渲染,让div渲染
	this.isAlive = true
}

可能大家初步看到这个reload函数好像没啥问题啊,可是实际结果是,DOM元素没有任何变化,这对应了文档中的一句话:如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的

由于vue更新DOM时,是异步的。this.isAlive = false与this.isAlive = true多次触发了vue中的同一个 watcher,所以,在队列中只有一次this.isAlive = true的操作,而这个操作,并没有改变数据,所以div也没有刷新的效果

data(){
	return:{
		msg:"内容",
		isAlive:true
	}
}

//这里就直接写方法了
reload(){
	// 条件渲染,让div销毁
	this.isAlive = false
	// 条件渲染,让div渲染
	this.$nextTick(()=>{
		this.isAlive = true
	})
}

而使用了this. n e x t T i c k 后 , 我 们 可 以 看 到 v u e 其 实 是 先 异 步 执 行 了 t h i s . i s A l i v e = f a l s e , 等 待 这 个 D O M 的 变 化 完 后 , 再 去 执 行 t h i s . nextTick后,我们可以看到vue其实是先异步执行了this.isAlive = false,等待这个DOM的变化完后,再去执行this. nextTick后,我们可以看到vue其实是先异步执行了this.isAlive=false,等待这个DOM的变化完后,再去执行this.nextTick内的this.isAlive = true的异步操作,实现局部刷新,

这正是vue文档中的例子:
当你设置 vm.someData = ‘new value’,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么

我们这里的this.isAlive = true,正是要基于更新后的 DOM状态来改变的。

本贴待更新,待我好好阅读一下nextTick的源码,再来品味其中的巧妙

标签:nextTick,vue,isAlive,DOM,刷新,div,true
来源: https://blog.csdn.net/weixin_37820964/article/details/110939338