vue的更新机制,vue页面更新
本文主要介绍vue(异步更新解决方案)的状态更新方法，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
状态更新(异步更新解决方案)解决方案异步更新和nexttick为什么需要异步更新nextTick原理？
状态更新(异步更新解决)
在vue中，状态更新是异步的，类似于react中的setstate。
解决方案
非组件解决方案：
div id=示例“{message}}/div
var vm=new Vue({
el: #example ，
数据：{
消息：“123”
}
})
Vm.message=新消息//更改数据
vm。$el.textContent===新邮件//false
Vue.nextTick(function () {
vm。$el.textContent===新邮件//true
})
使用虚拟机特别方便。$nextTick()实例方法放在一个组件内，因为它不需要一个全局的Vue，而且这个回调函数中会自动绑定到当前的Vue实例：
Vue.component(示例，{
模板： span{{ message }}/span ，
数据：函数(){
返回{
消息：“无更新”
}
},
方法：{
updateMessage:函数(){
This.message=更新完成
Console.log(这个。$ el.textcontent)//=无更新
这个。$nextTick(function () {
Console.log(这个。$ el.textcontent)//=更新完成
})
}
}
})
因为$nextTick()返回一个Promise对象，所以您可以使用新的ES2016 async/await语法来完成同样的事情：方法：{
updateMessage:异步函数(){
this.message=已更新
Console.log(这个。$ el.textcontent)//=未更新
等待这个。$nextTick()
Console.log(这个。$ el.textcontent)//=已更新
}
}
异步更新及nexttick
为什么需要异步更新
Vue异步更新DOM是为了避免频繁操作DOM。这些异步操作会通过nextTick函数(微任务优先)以cb的形式放入任务队列，每次Tick后执行这些cb并更新DOM。
更新异步内部最重要的是nextTick方法，它负责将异步任务添加到队列中，并执行异步任务。VUE也向用户公开它。数据修改后，可以立即获得相关的DOM，但没有更新那么快。nextTick可以解决这个问题。
nextTick 原理
在下一个DOM更新周期结束后执行的延迟回调。使用此方法可以在修改数据后立即获取更新的DOM。
/*存储异步执行的回调*/
常量回调=[]
/*一个标志位，如果timerFunc已经推送到任务队列，就不需要重复推了*/
让待定=假
/*指向将被推送到任务队列的函数的函数指针。当主线程任务完成时，任务队列中的timerFunc将被调用*/
让计时器运行
/*
推到队列中的下一个节拍时执行。
Cb回调函数
Ctx上下文
*/
导出函数nextTick (cb？函数，ctx？对象){
让_解决
//第一步中的传入cb将被推入回调并存储。
callbacks.push(()={
if (cb) {
尝试{
cb .呼叫(ctx)
} catch (e) {
handleError(e，ctx， nextTick )
}
} else if (_resolve) {
_解析(ctx)
}
})
//检查最后一个异步任务队列(即名为callbacks的任务数组)是否已经被调度和执行。这里的Pending相当于一个锁。
如果(！待定){
//如果最后一个异步任务队列已经完成，将pending设置为true(锁定锁)
待定=真
//调用判断Promise、MutationObserver和setTimeout的优先级。
定时器函数()
}
//第三步执行返回的状态
如果(！cb类型的承诺！==未定义){
返回新承诺(resolve={
_resolve=解决
})
}
}
Vue在更新DOM时异步执行。只要检测到数据更改，Vue就会打开一个队列，缓冲在同一个事件周期中发生的所有数据更改。
如果同一个观察器被多次触发，它只会被推入队列一次。这种在缓冲期间删除重复数据的方法对于避免不必要的计算和DOM操作非常重要。
然后，在下一个事件循环“滴答”中，Vue刷新队列并执行实际的(已消除重复的)工作。
E Vu内部尝试使用原生Promise.then，对异步队列使用MutationObserver和setImmediate，如果执行环境不支持，它将改为使用setTimeout(fn，0)。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。