// vue里面 data改变更新DOM是异步的 会先执行代码 再更新data里面的
//在哪里访问到更新后的DOM?
// this.$nextTick()里的函数体
//updated生命周期钩子函数
应用场景:
点击按钮 按钮消失。输入框出现并且聚焦
输入框聚焦:获取输入框 并调用focus方法 输入框还没有挂载到真实Dom上 需要用$nextTick
在数据更新结束之后调用此方法
<template>
<div>
<HelloWorld> </HelloWorld>
<input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow" />
<button v-else @click="btn">点击按钮消失,输入框出现并聚焦</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld,
},
data() {
return {
isShow: false,
};
},
methods: {
async btn() {
this.isShow = true;
// this.$refs.myInp.focus(