Vue中事件循环与Vue.nextTick()

Vue在数据变化后不会立即更新视图,而是在同一事件循环中所有数据变化完成后统一更新。事件循环包括同步任务执行和异步任务处理。Vue.nextTick用于在DOM更新后执行回调,确保了在下次更新循环时执行,适应于需要在DOM更新后获取最新状态的场景。
摘要由CSDN通过智能技术生成

1 事件循环

Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

1.1 Vue 异步执行 DOM 更新的机制:

(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要有了异步任务,就在"任务队列"之中放置一个事件。“任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列”,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。

2 Vue.nextTick()

代码示例:

//改变数据
vm.message = 'changed'

//想要立即使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值