In vuejs, why do I need to use nextTick when using installed interceptors?
As the docs said , I need to use nextTick to confirm $el
ready, but in another page , it roughly means I $el
was ready at the time of the call mounted
. So why would one need to use nextTick when using set hooks?
I believe it is el
actually set when the mounted
hook is called . The real use for is nextTick
described here . It is mainly used when you need direct DOM access (which is not recommended by the way) immediately after changing any change to your DOM in your code. Check out this code:
new Vue({
el: '#app',
data: {
text: 'one'
},
components: {
'child' : {
template: `<p>{{ text }}</p>`,
props: ['text']
}
},
mounted: function() {
console.log(document.querySelector('p').textContent); // 'one'
this.text = 'two'; // assign new value
console.log('after text has changed: ');
console.log(document.querySelector('p').textContent); // still 'one'
this.$nextTick(function() {
console.log('nextTick: ', document.querySelector('p').textContent); // now 'two' after 'nextTick'
})
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<child :text="text"></child>
</div>
So, my guess is that the migration docs are misleading in this case.