首页 > 其他分享> 文章详细

vue中的nextTick实现局部刷新

2020-12-09 20:31:28 阅读：270 来源： 互联网

标签：nextTick vue isAlive DOM 刷新 div true

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue中的nextTick实现局部刷新

vue中的nextTick