[JavaScript知识库]【vue】听说$nexttick，$set，$forceupdate都能起到更新视图的作用，那你知道他们的区别吗？

前言

想必很多小伙伴在使用vue时，都遇到过明明修改data里的数据了，但是视图却不更新的情况吧，这时候有经验的小伙伴，二话不说直接调用this.$forceupdate()强制更新页面，管他啥情况，刷就完事了，我属于是整个一个大无语。

$nexttick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法?Vue.nextTick?一样，不同的是回调的?this?自动绑定到调用它的实例上。

? ? ? ? 上面摘抄自vue官网，很多小伙伴可能看不懂，首先你要先知道vue的异步更新队列。

? ? ? ? 可能你还没有注意到，Vue是异步执行DOM更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环(event loop)中观察到的数据变化的watcher推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效去掉重复数据造成不必要的计算和DOM操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。

? ? ? ? “说的啥玩意儿，一句没看懂”

? ? ? ? ?“蒸滴捞，这都看不懂，给你打个比方，如果你要修改一个数据，还连续修改了很多次，程序总不能不断更新n次视图叭，这也太消耗性能了，所以实际上vue只会在你改了半天数据后，对你最终的结果进行更新。懂了吗？”

? ? ? ? ?“哇，这么牛吗，那nextick是怎么回事呢？”

? ? ? ? ?“听好了，哥一句话让你顿悟，它其实就是用来知道什么时候DOM更新完成的。”

? ? ? ? ?“666，不明觉厉，但是知道了有什么用呢？”

? ? ? ? ?“比如你在修改数据之后，想要操作dom，你经常会发现获取到dom绑定的值还是旧值”

? ? ? ? ?小明突然大声喊道：“啊对对对，就是这样，烦死我了，怎么解决它呢”

? ? ? ? ?“别急，你要先知道为什么，其实就是刚刚说的，你改了数据，它还搁那儿排序等着看你最后的结果呢，这时候dom还没更新。所以如果你想拿到新值，nexttick就派上用场了。因为它能知道dom的更新时间，你就可以在它的回调函数里去进行操作，就能拿到新值了”

? ? ? ? ?“哇，学到了，感谢大佬，还有个问题，怎么我总听说别人用$nexttick更新视图，我听你这意思它并没有起到更新视图的作用啊”

? ? ? ? ?“小伙子有长进，还能看出点东西。是的，网上总有些人乱扯，说用$nexttick更新视图，其实它只是让你的操作在视图更新后才执行而已”

? ? ? ? ?“好的，谢谢大佬，我这就拿个小本本记下来”

$set

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如?this.myObject.newProperty = 'hi')

数据更新但视图没更新，这种情况往往是我们定义了个对象，给这个对象添加了新的属性。

我们要知道，vue2的双向绑定原理它是通过Object.defineProperty()实现的，在初始化时，vue会把data中的数据加工成响应式的。然而如果你往这个数据上添加了新属性，显然，它没有被加工成响应式数据，那么视图怎么会更新呢？

? ? ? ?“那我该怎么做才能刷新视图呢？”

? ? ? ?“你分析一下就能想到，无非就是两种方案，一种是把新加的属性添加响应式，一种就是管他响应不响应的，用硬办法强制刷新下页面”

? ? ? ?“愿闻其翔”

? ? ? ?“第一种就是这里要说的$set，这是vue提供的api，你用它给对象添加属性就可以了”

? ? ? ?“好的，我去看看怎么用”

? ? ? ?“不用麻烦了，很简单的，看下面”

错误写法：this.$set(key,value)（ps: 可能是vue1.0的写法）

mounted () {
    this.$set(this.student.age, 24)
}

正确写法：this.$set(this.data,”key”,value’)

$forceupdate

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

$forceUpdate的原理很简单，即使强制触发update声明周期，重新渲染下dom：

Vue.prototype.$forceUpdate = function () {
? ? const vm: Component = this
? ? if (vm._watcher) {
? ? ? ? vm._watcher.update()
? ? }
}

总结

1. $nexttick并不是真正意义上的更新视图，而是等视图更新后再执行某些操作

2. 虽然$forceUpdate和$set都能起到更新视图的效果，但是前者并不推荐使用，一是，官方都说了，如果你都到了要用$forceupdate的地步了，那你十有八九是操作有问题；二是能用$set解决的问题，为什么要用$forceupdate这种更消耗性能的方法呢，如果用了，估计是你偷懒！