场景需求：

在vue3项目中，通过v-if控制input框的显示。想要让input框显示的时候能够自动聚焦，且光标在文本内容的末尾。

我的代码：

<input v-if="toEditTitle" autofocus @blur="endEditTitle"/>

分析原因：

input的blur事件只有在input标签是被focus后才能被触发，而现在input标签是被v-if条件渲染的。

解决方案

因为Vue是先处理数据,再重绘Dom,这中间有个时间差。所以focus()需写在Vue的生命周期钩子onUpdated中(当这个钩子被调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作);

<textarea v-else ref="todoTitleRef" @blur="endEditTitle">
</textarea>

const todoTitleRef = ref(null);

// 一旦页面更新了，就获取对应ref元素
onUpdated(() => {
    const inputDom = todoTitleRef.value; // 获取dom
    const contentLen = inputDom.value.length;
    inputDom.focus(); // 聚焦
    inputDom.setSelectionRange(contentLen, contentLen); // 光标定位在文本末尾
})

参考链接：vue3如何让输入框获取焦点并让光标定位在最后？ - 掘金 (juejin.cn)