项目中使用v-if=" show " 控制组件的显示或隐藏，当接口返回后this.show=false,进行赋值，后this.show= true显示 。但是页面没有正常显示，此时使用 this.$nextTick 。
一、 $nextTick()概述
1. $nextTick()原理
-
$nextTick() 是 Vue.js 框架中的一个方法，它主要用于 DOM 操作。当我们修改 Vue 组件中的数据时，Vue.js 会在下次事件循环前自动更新视图，并异步执行 $nextTick() 中的回调函数。这个过程可以确保 DOM 已经被更新，以及可以操作到最新的 DOM。
- 具体来说，当修改了 Vue 组件中的数据时，Vue.js 并不会立即进行视图更新。Vue.js 会将修改的数据记录下来，并在下一次事件循环时才更新视图。而 $nextTick() 方法则是用于等待这个事件循环结束后再执行回调函数。这样可以确保我们操作 DOM 的时候，DOM 已经被 Vue 更新过了。
2. $nextTick()作用
- 在下一个更新周期之后执行回调函数。这意味着当 vm.$nextTick() 执行完毕时，DOM 已经被更新。
- 在代码执行上下文中延迟回调的执行，直到所有同步的 DOM 更新完成。这可以避免一些异步问题或并发更新（例如修改父组件的数据，然后操作子组件中已更改的 Prop）。
- 注意： 在大多数情况下，Vue.js 可以自动处理 DOM 更新并直接渲染到页面上，因此通常情况下不必手动使用 $nextTick() 方法。但对于一些需要在 DOM 更新后执行的操作，比如获取更新后的元素宽高或操作一些插件等，时则很有用。
二、$nextTick()常见应用场景
1. 改变数据后更新DOM元素
<template>
<div>{{message}}</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello Vue'
}
},
methods: {
updateMessage () {
this.message = 'Updated Message'
// 在 DOM 更新后操作 DOM
this.$nextTick(() => {
// 通过 DOM API 更新文本
this.$el.textContent = 'DOM Updated!'
})
}
}
}
</script>
2. 获取更新后的DOM尺寸和位置
<template>
<div ref="box">{{message}}</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello Vue'
}
},
methods: {
logBoxInfo () {
// 获取更新后的 DOM 节点信息
this.$nextTick(() => {
const box = this.$refs.box
console.log(box.offsetWidth, box.offsetHeight)
})
}
}
}
</script>
3. 执行复杂的计算
<template>
<div>Computed Value: {{computedValue}}</div>
</template>
<script>
export default {
data () {
return {
items: [1, 2, 3, 4, 5]
}
},
computed: {
computedValue () {
// 执行复杂的计算
const total = this.items.reduce((sum, val) => sum + val, 0)
// 确保下一个 DOM 周期中更新视图
this.$nextTick(() => {
console.log(`Total: ${total}`)
})
return total
}
}
}
</script>
4. 在父组件中，等待子组件数据更新后再执行操作
// Parent.vue
<template>
<div>
<child ref="child"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
mounted () {
// 等待子组件数据更新后再执行操作
this.$nextTick(() => {
this.$refs.child.doSomething()
})
}
}
</script>
// Child.vue
<template>
<div>{{message}}</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello'
}
},
methods: {
doSomething () {
this.message = 'Updated Message'
}
}
}
</script>
5. 等待 Vue.js 插件初始化后再执行操作（例如使用 Element UI 组件）
<template>
<el-date-picker v-model="date"></el-date-picker>
</template>
<script>
export default {
data () {
return {
date: null
}
},
mounted () {
// 等待 Element UI 组件初始化后再执行操作
this.$nextTick(() => {
this.$refs.picker.$el.querySelector('input').focus()
})
}
}
</script>
6. 监听视图变化并执行相应操作
<template>
<div>
<input ref="input" v-model="message">
<div>Message Length: {{messageLength}}</div>
</div>
</template>
<script>
export default {
data () {
return {
message: ''
}
},
computed: {
messageLength () {
return this.message.length
}
},
methods: {
focusInput () {
// 监听视图变化并执行相应操作
this.$nextTick(() => {
this.$refs.input.focus()
})
}
},
mounted () {
this.focusInput()
}
}
</script>
三、 $nextTick() 与异步更新原理相关问题解析
- 在 Vue.js 中，数据的改变并不会立即触发 DOM 的更新，而是会放到一个“异步更新队列”中等待处理。Vue.js 会在每一次事件循环（Event Loop）中对异步更新队列进行处理，当上一个事件循环结束后进行 DOM 更新。
- $nextTick() 方法的作用正是等待上一次事件循环执行完毕，并在下一次事件循环开始时再执行回调函数。这样可以保证回调函数中的 DOM 操作已经被 Vue.js 进行过更新，从而避免了一些潜在的问题。
- 例如，下面这个示例：
Vue.component('comp', {
props: ['msg'],
template: '<div>{{ msg }}</div>'
});
var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
methods: {
updateMessage() {
this.message = 'Hello, World';
console.log(this.$refs.comp.$el.textContent); // Hello
this.$nextTick(() => {
console.log(this.$refs.comp.$el.textContent); // Hello, World
});
}
}
});
-
在 updateMessage 方法中，我们将 message 的值从 “Hello” 修改为 “Hello, Word”，然后打印了子组件 的内容。由于 Vue.js 是异步更新 DOM 的，因此第一个打印结果会是 “Hello” 而不是修改后的 “Hello, World”。但是，使用 $nextTick() 方法可以使得第二个打印结果正确输出 “Hello, World”。
- 注意：虽然 $nextTick() 方法可以解决异步更新导致的问题，但如果过度使用该方法会导致性能问题。因此，在实际开发中，只有在必要的情况下才应该使用 $nextTick() 方法。