Vue.$nextTick()的使用

1.nextTick的定义

在DOM更新完后在执行回调函数，简单理解:就是当数据更新完，DOM渲染完毕后，在执行回调函数

2.nextTick()的语法使用

在Vue组件可以使用this.nextTick(fn) 使用此方法,fn为回调函数

3.使用场景

这里以一个input获取焦点为例

// 这页面显示一个输入框或者是按钮，最开始是展示一个按钮，当点击按钮后，则显示输入框
// 当输入框失去焦点后，则显示按钮
// 需求: 当输入框展示的时候，自动获取焦点，获取焦点使用的是focus()方法
// 若是在按钮点击后，直接使用focus()方法获取焦点，则会失败，因为DOM还没渲染到页面
// 拿不到输入框的ref，所以需要用到了nextTick()方法
<template>
    <div>
        <input type="text" v-if="flag" ref="inputRef" @blur="showButton">
        <button v-else @click="showInput">展示输入框</button>
    </div> 
</template>
<script>
    export default{
        data(){
            return {
                flag: false
            }
        },
        methods: {
            showInput(){
                this.flag = true;
                this.$nextTick(() => {
                    this.$refs.inputRef.focus();
                })
            },
            showButton(){
                this.flag = false;
                
            }
        }
    }
</script>

说明: 当input渲染到页面后，会自动执行$nextTick()里面的回调函数

为什么不在生命周期函数updated中获取焦点的原因?

因为updated()中的方法执行是当数据发生改变后，就会执行，当如果把focus()方法放在updated()函数中，一旦flag发生改变，就会执行此方法，当flag变为true和false都会执行，但当flag为false时，input输入框元素已经删除，并没有必要执行此方法，所以不放在updated中执行

4.总结

当某些代码执行，需要延迟到DOM元素渲染完才执行，则可以考虑使用nextTick()方法