浅析$nextTick和$forceUpdate

仓廪实则知礼节，衣食足则知荣辱。这篇文章主要讲述浅析$nextTick和$forceUpdate相关的知识，希望能为你提供帮助。
vue中提供了数十种api供我们开发者日常使用，而常用的其实也就十多种，比如??setup???, ??mount???, ??forceupdate???, ??nextTick???, ??compute???, ??ref???等，这些参数有的是在生命周期中进行管理，有的是在页面执行过程中，更新参数，有些是可以用来检测页面数据，这些随着项目的推进或多或少都是会使用到。其中??nextTick???和??forceUpdate???都是用来更新参数的，那这两个参数有什么差异呢？这还真值得仔细琢磨。

在开发过程中，经常出现的场景比如当你气势汹汹地使用Vue大展宏图的时候，突然发现，咦，我明明对这个数据进行更改了，但是当我获取它的时候怎么是上一次的值……
此时，Vue就会说：“小样，这你就不懂了吧，我的DOM是异步更新的呀！！！”
简单的说，Vue的响应式并不是只数据发生变化之后，DOM就立刻发生变化，而是按照一定的策略进行DOM的更新。这样的好处是可以避免一些对DOM不必要的操作，提高渲染性能。
在Vue官方文档中是这样说明的：

可能你还没有注意到，Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际 (已去重的) 工作。

【浅析$nextTick和$forceUpdate】白话一点就是说，其实这是和JS当中的事件循环是息息相关的，就是Vue不可能对每一个数据变化都做一次渲染，它会把这些变化先放在一个异步的队列当中，同时它还会对这个队列里面的操作进行去重，比如你修改了这个数据三次，它只会保留最后一次。这些变化是都可以通过队列的形式保存起来，那现在的问题就来到了，那vue是在事件循环的哪个时机来对DOM进行修改呢？
Vue有两种选择，一个是在本次事件循环的最后进行一次DOM更新，另一种是把DOM更新放在下一轮的事件循环当中。这时，尤雨溪拍了拍胸脯说：“这两种方法，我都有!”但是因为本轮事件循环最后执行会比放在下一轮事件循环要快很多，所以Vue优先选择第一种，只有当环境不支持的时候才触发第二种机制。
虽然性能上提高了很多，但这个时候问题就出现了，我们都知道在一轮事件循环中，同步执行栈中代码执行完成之后，才会执行异步队列当中的内容，那我们获取DOM的操作是一个同步的呀！！那岂不是虽然我已经把数据改掉了，但是它的更新异步的，而我在获取的时候，它还没有来得及改，所以会出现文章开头的那个问题。
这。。。我确实需要进行这样操作，那这么办呢？？
没关系啦，尤大很贴心的为我们提供了??Vue.$nextTick()??
$nextTick官方解释：将回调延迟到下次 DOM 更新循环之后执行。
理解首先要了解一下vue的??异步更新队列??，Vue 异步执行 DOM 更新。只要观察到数据变化，不会立即更新DOM,Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个数据被的多次改变，只会被推入到队列中一次。例如，当你设置?? vm.someData = https://www.songbingjia.com/android/new value??，对应的DOM更新会被推到一个队列里，该组件不会立即重新渲染，会在当前tick完毕后，在下一个tick中渲染DOM。在事件循环中，每进行一次循环操作称为tick。而??nextTick??函数就是vue提供的一个实例方法，数据更新后等待下一个tick里Dom更新完后执行回调，回调的 this 自动绑定到调用它的实例上。
既然提到上述两点，那么又好奇了，Vue是如何渲染DOM节点的？
Vue渲染DOM——浏览器渲染流程
浏览器接收到 HTML 文件并转换为 DOM 树，将 CSS 文件转换为 CSSOM
在这一过程中，浏览器会确定下每一个节点的样式到底是什么，并且这一过程其实是很消耗资源的。因为样式你可以自行设置给某个节点，也可以通过继承获得。在这一过程中，浏览器需要递归??CSSOM ??树，然后确定具体的元素到底是什么样式。
生成渲染树
当我们生成??DOM??树和??CSSOM??树以后，就需要将这两棵树组合为渲染树。
在这一过程中，不是简单的将两者合并就行了。渲染树只会包括需要显示的节点和这些节点的样式信息，如果某个节点是??display: none??的，那么就不会在渲染树中显示。
当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流），然后调用 GPU 绘制，合成图层，显示在屏幕上。对于这一部分的内容因为过于底层，还涉及到了硬件相关的知识，这里就不再继续展开内容了。
为什么操作 DOM 慢想必大家都听过操作??DOM??性能很差，但是这其中的原因是什么呢？
因为??DOM??属于渲染引擎中的东西，而??JS??又是??JS??引擎中的东西。当我们通过??JS??操作??DOM??的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。操作??DOM??次数一多，也就等同于一直在进行线程之间的通信，并且操作??DOM??
而且可能还会带来重绘回流的情况，所以也就导致了性能上的问题。
经典面试题：插入几万个 DOM，如何实现页面不卡顿？首先我们肯定不能一次性把几万个??DOM??全部插入，这样肯定会造成卡顿，所以解决问题的重点应该是如何分批次部分渲染??DOM??。大部分人应该可以想到通过??requestAnimationFrame??的方式去循环的插入??DOM??，其实还有种方式去解决这个问题：虚拟滚动??virtualized scroller??。
这种技术的原理就是只渲染可视区域内的内容，非可见区域的那就完全不渲染了，当用户在滚动的时候就实时去替换渲染的内容。
什么情况阻塞渲染首先渲染的前提是生成渲染树，所以??html??和??CSS??肯定会阻塞渲染。如果你想渲染的越快，你越应该降低一开始需要渲染的文件大小，并且扁平层级，优化选择器。
然后当浏览器在解析到??script??标签时，会暂停构建??DOM??，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载??JS??文件，这也是都建议将??script??标签放在??body??标签底部的原因。
当然在当下，并不是说??script??标签必须放在底部，因为你可以给??script??标签添加??defer??或者??async??属性。
当??script??标签加上??defer??属性以后，表示该??JS??文件会并行下载，但是会放到??HTML??解析完成后顺序执行，所以对于这种情况你可以把??script??标签放在任意位置。
对于没有任何依赖的??JS??文件可以加上??async??属性，表示??JS??文件下载和解析不会阻塞渲染。
重绘（Repaint）和回流（Reflow）重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。

重绘是当节点需要更改外观而不会影响布局的，比如改变??color??就叫称为重绘
回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。
用法：在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
参数

Function [callback]

示例：
不妨比较一下使用nextTick和不使用的区别

< template>
< span ref="test"> egData < /span>
< el-button @click="changeData"> 改变< /el-button>
< /template>

< script lang="ts">
importdefineComponentfrom vue

export default defineComponent(
setup()
return
,
data()
return
egData: old Message

,
methods:
changeData()
console.log(this.$refs.test, 1-----)
console.log(-----------)
this.$nextTick(function ()
console.log(this.$refs.test, 2-----)
)
this.egData = https://www.songbingjia.com/android/new Message

)
< /script>

< style scoped> < /style>

总结在上面提到很多理论知识，看看this.$nextTick具体是如何使用的?
??this.$nextTick??这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来。
在Vue生命周期的??created()??钩子函数进行的??DOM??操作一定要放在??Vue.nextTick()??的回调函数中。原因是在??created()??钩子函数执行的时候??DOM??其实并未进行任何渲染，而此时进行??DOM??操作无异于徒劳，所以此处一定要将??DOM??操作的??js??代码放进??Vue.nextTick()??的回调函数中。与之对应的就是??mounted??钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。
在数据变化后要执行的某个操作，比如案例中??vm.egData = https://www.songbingjia.com/android/new message??，??DOM??并不会马上更新，而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的??DOM??更新。如果此时你想要根据更新的??DOM??状态去做某些事情，就会出现问题。。为了在数据变化之后等待??Vue??完成更新??DOM??，可以在数据变化之后立即使用??Vue.nextTick(callback)??。这样回调函数在??DOM??更新完成后就会调用。
??mounted??不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用??vm.$nextTick??替换掉??mounted??
$forceUpdate归属于实例方法,迫使Vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。结合vue的生命周期，调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。对于forceUpdate的分析，不妨见这篇文章??forceUpdate的解析??
用法：当在data里没有显示的声明一个对象的属性，而是之后给该对象添加属性，这种情况vue是检测不到数据变化的，可以使用$forceUpdate()

< template>
< span ref="test"> egData < /span>
< el-button @click="changeData"> 改变< /el-button>
< /template>

< script lang="ts">
importdefineComponentfrom vue

export default defineComponent(
setup()
return
,
data()
return
egData: old Message

,
methods:
changeData()
this.egData = https://www.songbingjia.com/android/new Message
this.$forceUpdate()

)
< /script>

< style scoped> < /style>