gpt4 book ai didi

javascript - Vue : when does a function passed to vm. $nextTick 执行?

转载 作者:搜寻专家 更新时间:2023-10-30 22:58:28 24 4
gpt4 key购买 nike

在我看来,流程应该是:DataChange --> DOM-Rerender --> 回调函数传递给 $nextTick execute. 对吧?但是在下面的简单示例中,我无法弄清楚

<div id='app'>
{{msg}}
</div>

let app = new Vue({
el:'#app',
data:{
msg:'message'
},
mounted(){
this.$nextTick(()=>{
this.message = 'NEW MESSAGE'
})
}
})

我不知道为什么函数执行(消息变成'NEW MESSAGE'),'因为我没有改变任何数据,我想我必须改变数据像'this.someDataProperty = foo ' 这样传递给 $nextTick 的回调就可以执行了吗?

我阅读了有关 vm.$nextTick 的文档,它说传递给 nextTick 函数的回调将在下一次 DOM 更新后执行。但是下一次 DOM 更新是什么?是时间还是浏览器重新粉刷?如果数据更改可能随时发生,下一个 DOM 更新是什么?像这样:

//...
mounted(){
this.msg = 'foo'
axios.get('//bar.com').then(response=>{
this.msg = response.msg
})
axios.get('//baz.com').then(response=>{
this.msg = response.msg
})
this.$nextTick(function(){
console.log(document.querySelector('#app').innerHTML)
})
}

有人能告诉我下一次 DOM 更新的确切时间吗?

最佳答案

您对 this.$nextTick 的理解有点不正确。当您将回调传递给 $nextTick 时,Vue 将在执行回调之前等待 DOM 更新(因为任何未完成的数据更改)。但是,如果没有未完成的数据更改,也没有 DOM 更新,回调将立即被调用。 documentation诚然不清楚这种行为,但你可以在 source code 中看到逻辑.

您似乎想在 DOM 更新时更改一个值。为此,您可以使用 updated 生命周期 Hook 。

这是一个示例,其中更改输入字段的绑定(bind)值将更新 DOM,从而导致触发 updated Hook ,更新 this.msg 的值:

new Vue({
el: '#app',
data() {
return {
msg: 'foo',
value: 'text'
}
},
updated() {
this.msg = 'bar';
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
{{ msg }}
<input v-model="value"/>
</div>

关于javascript - Vue : when does a function passed to vm. $nextTick 执行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51332313/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com