vue3输入框生成的时候如何自动获取焦点详解

<template>
  <div class="container">
    <ul class="list-group">
      <template v-for="(i, index) in list" :key="index">
        <li class="list-group-item d-flex justify-content-between" v-if="!i.checked">
          <div class="form-group form-check mb-0">
            <input type="checkbox" class="form-check-input" />
            <label v-if="!i.isEdit" class="form-check-label" @dblclick="showEdit(i, index)"> {{ i.name }} </label>
            <label v-else class="form-check-label" :for="'i-' + index">
              <!--  -->
              <input type="text" v-model="editValue" @blur="changeEdit" ref="myInput"
            /></label>
          </div>
          <button type="button" class="close" aria-label="Close" @click="remove(index)">
            <span aria-hidden="true">&times;</span>
          </button>
        </li>
      </template>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'

export default defineComponent({
  name: 'HomeView',
  setup() {
    // 元素节点
    const myInput = ref(null)
    // 编辑的索引
    let editIndex = 0
    // 是否获取焦点
    const open = 0
    // 数据
    const state = reactive({
      value: '',
      editValue: '',
      list: [
        {
          name: '1',
          checked: false,
          isEdit: false
        },
        {
          name: '2',
          checked: false,
          isEdit: false
        },
        {
          name: '3',
          checked: false,
          isEdit: false
        }
      ]
    })
    // 双击修改
    const showEdit = (item, index) => {
      if (open == 0) {
        open = 1
        editIndex = index
        item.isEdit = true
        state.editValue = item.name
      }
    }
    // 失去焦点
    const changeEdit = () => {
      state.list[editIndex] = {
        name: state.editValue,
        checked: false,
        isEdit: false
      }
      open = 0
      editIndex = 0
    }
    // 移除
    const remove = (index) => {
      state.list.splice(index, 1)
    }

    return {
      ...toRefs(state),
      showEdit,
      changeEdit,
      remove,
      myInput
    }
  }
})
</script>

npm run serve

    // 双击修改
    const showEdit = (item, index) => {
      if (open == 0) {
        setTimeout(() => {
          myInput.value[0].focus()
        })
        open = 1
        editIndex = index
        item.isEdit = true
        state.editValue = item.name
      }
    }

template:
	 <button ref="btn"></button>
methods:
	this.$refs.btn

<template>
  <div ref="box">div</div>
</template>

<script>
// 引入
import { onMounted, ref } from 'vue';
export default {
  name: 'App',
  setup() {
    let box = ref(null);
    // onMounted() 中的行为会在声明周期 mounted 中执行。
    onMounted(() => {
    // 在这里就可以读取到我们需要的元素节点
      console.log('box.value', box.value);
    })
    return {box};
  }
}
</script>

// 使用之前记得引入onMounted 
onMounted(() => {
   console.log('myInput.value', myInput.value)
})

onMounted(() => {
   console.log('myInput.value', myInput.value)
    myInput.value[0].focus()
})

// 使用之前记得引入onUpdated 
onUpdated(() => {
   console.log('myInput.value', myInput.value)
})

// 代理对象
Proxy {0: input}[[Handler]]: Object
	[[Target]]: Array(0)
	[[IsRevoked]]: false

import { defineComponent, reactive, toRefs, ref, nextTick, watch } from 'vue'

    // 是否获取焦点
    let open = ref(0)

    watch(open, (newValue, oldValue) => {
      if (newValue == 1) {
        nextTick(() => {
          console.log(myInput.value)
          console.log('--- DOM更新了 ---')
          myInput.value[0].focus()
        })
      }
    })