定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（说明：Vue 实现响应式并不是在数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新）
简单理解：当数据更新了，并在DOM中渲染后，便自动执行nextTick()中的回调函数。
应用场景
-
Vue生命周期的created()钩子函数中进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。详情看下述的示例二。
-
当你想在项目中改变DOM元素的数据后基于新的DOM做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后，当你想立即使用js操作新的视图的时候就需要使用它。
-
在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。
示例一
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '变声前，嗷嗷嗷~'
}
})
app.message = '变声后，嘤嘤嘤~'
console.log(app.$el.textContent) // 变声前，嗷嗷嗷~
Vue.nextTick(function () {
console.log(app.$el.textContent) // 变声后，嘤嘤嘤~
})
</script>
</body>
</html>
示例二
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<demo1></demo1>
<demo2></demo2>
</div>
<script>
// 自定义组件
Vue.component('demo1', {
template: '<div><span>{{ message }}</span></div>',
data: function () {
return {
message: 'demo1:变声前，嗷嗷嗷~'
}
},
mounted: function(){
this.message = 'demo1:变声后，嘤嘤嘤~'
console.log(this.$el.textContent) // => 'demo1:变声前，嘤嘤嘤~'
this.$nextTick(function () {
console.log(this.$el.textContent) // => 'demo1:变声后，嘤嘤嘤~'
})
}
})
Vue.component('demo2', {
template: '<div><span>{{ message }}</span></div>',
data: function () {
return {
message: 'demo2:变声前，嗷嗷嗷~'
}
},
created: function () {
this.message = 'demo2:变声后，嘤嘤嘤~'
console.log(this.$el) // => 'undefined'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '变声后，嘤嘤嘤~'
})
}
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
网友评论