将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
场景解释:
<template>
<div>
<input id="keywords" v-show="bState" type="text" placeholder="请输入">
<button @click="Btnclick">按钮</button>
</div>
</template>
<script>
import { mixinsTest } from ‘./mixins‘;
export default {
name: ‘‘,
components: {},
mixins: [mixinsTest],
props: {},
data() {
return {
names: ‘我是主线de‘,
bState: false
};
},
watch: {},
computed: {},
created() {
console.log(‘我是主线‘);
console.log(this.names);
},
mounted() {
this.Btnclick();
},
destroyed() {},
methods: {
Btnclick() {
this.bState = true;
this.$nextTick(() => {
document.getElementById(‘keywords‘).focus();
});
}
}
};
</script>
<style lang="less" scoped>
</style>
比如刚开始这个vue组件里面有一个v-show隐藏 的input框,然后需要在mounted里面去操作这个DOM,这个时候，如果不用$nextTick就会只是显示而不会聚焦,如果用$nextTick就ok
具体参考https://segmentfault.com/a/1190000012861862?utm_source=tag-newest
原文：https://www.cnblogs.com/lsc-boke/p/12034091.html