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>

Примечание . После щелчка поле ввода не получает фокус, а состояние отображения поля ввода равно нулю и скрывается.

 Причина: это связано с тем, что после выполнения события Vue сохранит все операции в очереди для унифицированного выполнения, а затем обновит элемент DOM после выполнения всех операций. Таким образом, когда событие выполняется, после изменения состояния статуса страница не обновляется немедленно, в результате чего скрытые элементы не могут получить фокус.

 

Оригинальный автор: У Сяотан

Время создания: 2023.5.7