show false → v-if 让输入框一开始根本不存在页面上没有它点击 → show true → 数据立刻变了输入框快速显示异步更新约 1~2ms 后此时还没有聚焦显示完成 → $nextTick 回调执行 → 聚焦① show true数据变化↓ 异步微任务② DOM 更新 → 输入框显示↓ 紧接着③ $nextTick 回调 → 聚焦!DOCTYPE htmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title$nextTick练习/titlescriptsrchttps://cdn.staticfile.org/vue/3.3.4/vue.global.js/scriptstylebody{font-family: Arial, sans-serif;padding: 40px;background:#f5f7fa;}.box{background:#fff;padding: 30px;border-radius: 8px;max-width: 400px;margin:0auto;box-shadow:02px 8px rgba(0,0,0,0.1);}input{width:100%;padding: 10px;font-size: 16px;border: 2px solid#409eff;border-radius: 4px;outline: none;margin-bottom: 16px;box-sizing: border-box;transition: all0.2s;}input:focus{border-color:#f56c6c;box-shadow:0004px rgba(245,108,108,0.25);background:#fef0f0;}button{width:100%;padding: 12px;font-size: 16px;background:#409eff;color:#fff;border: none;border-radius: 4px;cursor: pointer;}button:hover{background:#66b1ff;}.tip{margin-top: 16px;color:#909399;font-size: 14px;line-height:1.6;}.status{margin-top: 16px;color:#303133;font-size: 15px;}.ok{color:#67c23a;}/style/headbodydividappdivclassbox!-- 只有当 show 为true时input 才会被渲染到 DOM 中 --div v-ifshowinputrefinputplaceholder我获得焦点了/divbutton clickopen打开/buttondivclassstatus当前 showb{{show}}/bspan v-iffocusedclassok输入框已获得焦点 ✓/span/divdivclasstip点击「打开」后br1. show 变为 truebr2. 用$nextTick等待 DOM 更新br3. 输入框自动获得焦点看红色高亮边框/div/div/divscriptconst{createApp}Vue;createApp({data(){return{show: false, focused:false};}, methods:{open(){console.log(点击按钮show 设为 true);this.showtrue;// 关键点此时 DOM 还没更新input 还不存在 console.log(此刻 $refs.input 是否存在,!!this.$refs.input);// 如果直接写 this.$refs.input.focus()会报错 this.$nextTick((){this.$refs.input.focus();this.focusedtrue;console.log($nextTick 回调执行input 已成功聚焦);});}}}).mount(#app);/script/body/html