vue中$nextTick用法的解释

Vue是一个非常流行的框架，它结合了angular和react的优点，形成了一个具有双向数据绑定的轻量级mvvm框架。我更喜欢用它。当我们使用vue时，我们经常使用这个。$nextTick，我相信你已经用过了。我通常的场景是，在获取数据之后，我需要对新视图执行下一个操作或其他操作，我发现我无法获取dom。因为赋值只改变数据模型，而不更新视图。此时，我们需要使用本章中介绍的功能。

虽然Vue.js通常鼓励开发人员以“数据驱动”的方式思考，避免直接接触DOM，但有时我们会这样做。例如，您在Vue生命周期的created()/mounted()钩子函数中执行的DOM操作必须放在Vue.nextTick()的回调函数中。原因是什么？原因是在执行created()/mount()钩子函数的时候，DOM根本没有渲染，这个时候操作DOM是没有用的。因此，这里必须将DOM操作的js代码放入Vue.nextTick()的回调函数中。

为什么要用nextTick？

请参见以下代码

new Vue({ El : ' # app }，data: { list: [] }，mount ed : function(){ this . get()}，methods : { get : function(){ this。$ http.get ('/API/article ')。然后(函数(RES){这个。列表=res.data.data.list//reflist指ul元素。我想把第一个李的颜色改成红色。$ refs . list . getelementsbytagname(' Li ')[0]。style.color=' red'})}，}})得到数据后，分配给数据模型中的list属性，然后想参考ul元素找到第一个li，将其颜色改为红色，但实际上我们在执行这句话的时候就知道ul下面是没有Li的，也就是说刚才执行的赋值操作目前还没有引起视图层的更新。因此，在这种情况下，vue为我们提供了一个$nextTick方法。如果我们将来想要操作更新后的视图，我们只需要将要执行的函数传递给这个。$nextTick方法，vue将为我们完成这项工作。

new Vue({ el: '#app '，data: { list: [] })，mounted: function () { this。$nextTick(()={ this.get() }) }，Methods : { get: function(){ this。$ http.get ('/API/article ')。然后(函数(RES){这个。列表=res.data.data.list//reflist指ul元素。我想把第一个li颜色改成红色。$ refs . list . getelementsbytagname(' Li ')[0]。style.color=' red'})}，}})摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接