vue是如何应对大数据量快速赋值的场景的？

Question

如题，遇到一个很疑惑的点，如果是下面的代码块

<div v-if="onoff">
    <component :data="data"></component>
</div>

// 假设重复无间断的执行下面的代码多次，data随机大量数据
this.onoff = false
this.onoff = true
this.data = range()

vue是会怎么应对这种场景呢？ 是每次有新的响应都取消上一次的，还是依次执行完呢？ 如果是取消上一次的话，是怎么取消上一次呢？ 另外有没有可能会产生内存泄漏呢？

求大神解惑，感谢万分！

Answer 1

基于 JS 的 EventLoop 机制，利用了异步队列。大体上来说你猜测的第一种是对的。

针对你说的例子里实际有两种优化。

this.onoff = false;
this.onoff = true;

• 这属于同一个 Watcher 被触发两次，那么在一次事件循环中只会入队一次。

this.onoff = true;
this.data = range();

• 所有 Watcher 入队后才会刷新视图。

具体的可以看这篇：https://segmentfault.com/a/11...

也可以自行百度：Vue 数据响应式原理 和 Vue 异步更新原理，看前者理解什么是 Watcher，看后者理解队列是怎么工作的。

如果对 JS 的 EventLoop 机制还不熟的话，先去恶补相关知识。