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