vue3 vant框架van-field输入框获取焦点失败的问题

今天接触了一个项目，需要将身份证号脱敏后展示在输入框中，并且实现点击后可以修改，为了达成这样的效果，我用两个van-field输入框来回切换实现，一个展示脱敏的证件号（只读），一个展示未脱敏的证件号（可修改）。展示可修改的输入框时，即使获取到了示例并调用focus()方法van-field仍然无法获取焦点的问题。

经过一番排查后，发现问题所在，通过组件实例调用focus()方法需要在组件已正常渲染的情况下才能生效，由于我切换输入框时立即调用了focus()方法，此时van-field输入框还未及时渲染，因此出现了获取焦点失败的情况，这种情况下使用nextTick方法即可解决。

const idField = ref(null);//证件输入框实例
const phoneField = ref(null);//电话号码输入框实例
watch([isInputId, isInputPhone], () => {
  if (isInputId.value) {
    console.log('isInputId聚焦');
    nextTick(() => {
      idField.value.focus();
    })
  }
  if (isInputPhone.value) {
    console.log('isInputPhone聚焦');
    nextTick(() => {
      phoneField.value.focus();
    })
  }
})

最后在附上一张完整的效果图，用于展示脱敏信息的同时兼顾了修改功能。