第二十七章 Vue异步更新之$nextTick

目录

一、概述

二、完整代码

2.1. main.js

2.2. App.vue

---

一、概述

需求：编辑标题, 弹出显示编辑框自动聚焦

1. 点击编辑，显示编辑框

2. 让编辑框，立刻获取焦点

我们常规的思路可能会编写如下代码来实现：

问题："显示之后"，立刻获取焦点是不能成功的！

原因：Vue是异步更新DOM (提升性能)，当执行获取焦点这段代码时，前面显示输入框在渲染时还没执行结束。

二、完整代码

2.1. main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

2.2. App.vue

<template><div class="app"><div v-if="isShowEdit"><input ref="inp" v-model="editValue" type="text"><button>确认</button></div><div v-else><span>{{ title }}</span><button @click="handleEdit">编辑</button></div></div>
</template><script>
export default {data () {return {title: '大标题',editValue: '',isShowEdit: false}},methods: {handleEdit () {// 1. 显示输入框this.isShowEdit = true// 2. 让输入框获取焦点this.$nextTick(() => {this.$refs.inp.focus()})}}
}
</script><style scoped>
.logout {margin: 20px;
}
button {margin: 10px;
}
</style>