Vue等待页面渲染完毕 nextTick 方法

$nextTick 方法会等待 DOM 结点更新完成之后再去执行。

 nextTick 应用场景：

创建 Home.vue 页面，用于显示用户名称 点击编辑按钮显示输入框 并且自动获取焦点。

<template>
    <div>
        <h2>欢迎您！{{ name }}</h2>
        <button @click="edit">编辑</button>
        <input ref="content" v-show="status" type="text" v-model="name">
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            name: "张三",
            status: false
        }
    },
    methods: {
        edit() {
            this.status = !this.status;
            // 显示输入框后自动获取焦点
            this.$refs.content.focus();
            // 获取输入框显示状态
            console.log(this.$refs.content.style.display); // none
        }
    }
}
</script>

注：点击后输入框并未获取到焦点 并且输入框的显示状态为 none 隐藏。

 原因：这是因为当事件执行后，Vue 会将所有的操作存放在一个队列中统一执行，全部执行完毕后再去更新 DOM 元素。所以当事件执行时，改变完 status 的状态之后，页面并没有立即更新，导致隐藏的元素不可以获取焦点。

 

原创作者：吴小糖

创作时间：2023.5.7