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()
    }
}

总结

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

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

到此这篇关于vue中$nexttick,$set,$forceupdate的区别的文章就介绍到这了,更多相关vue $nexttick,$set,$forceupdate内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论