--nextTick)
这一节了解一下Vue3中的nextTicknextTick是等待DOM更新完成之后执行回调的函数。Vue的响应式数据变更不会立刻更新DOM是异步批量更新nextTick就是用来在DOM渲染完毕后再执行代码。简单总结:API:import { nextTick } from vue // Promise写法async await await nextTick() // 回调写法 nextTick(() { // DOM更新完成 })场景1 数据更新后读取DOM获取更新后的文本、尺寸、位置等。2 v-if/v-show 切换后操作元素元素刚渲染出来时DOM尚未就绪。3 列表动态增删后聚焦/滚动v-for新增项后自动聚焦或滚动到末尾。栗子:template div button clickshowInput显示输入框并自动聚焦/button input v-ifflag refinputRef placeholder我会自动聚焦 / /div /template script setup langts import { ref, nextTick } from vue const flag ref(false) const inputRef refHTMLInputElement | null(null) const showInput async () { flag.value true await nextTick() inputRef.value?.focus() } /scripttemplate div button clickaddMsg新增一条消息/button div classmsg-box refboxRef div classmsg-item v-foritem in msgList :keyitem.id {{ item.content }} /div /div /div /template script setup langts import { ref, nextTick } from vue const msgList ref([ { id: 1, content: 消息1 }, { id: 2, content: 消息2 }, ]) const boxRef refHTMLDivElement | null(null) const addMsg async () { const newId Date.now() msgList.value.push({ id: newId, content: 新消息${newId} }) await nextTick() if (boxRef.value) { boxRef.value.scrollTop boxRef.value.scrollHeight } } /script style scoped .msg-box { width: 300px; height: 200px; border: 1px solid #ccc; overflow-y: auto; } .msg-item { padding: 4px; } /style注意1 仅返回PromiseVue3的nextTick()不再支持传入回调函数必须用await或.then()。2 避免滥用能用声明式模板/计算属性解决的问题不要用nextTick手动操作DOM。3 错误处理await nextTick()可能因组件卸载等抛出异常建议用try/catch包裹。
这一节了解一下Vue3中的nextTicknextTick是等待DOM更新完成之后执行回调的函数。Vue的响应式数据变更不会立刻更新DOM是异步批量更新nextTick就是用来在DOM渲染完毕后再执行代码。简单总结:API:import { nextTick } from vue // Promise写法async await await nextTick() // 回调写法 nextTick(() { // DOM更新完成 })场景1 数据更新后读取DOM获取更新后的文本、尺寸、位置等。2 v-if/v-show 切换后操作元素元素刚渲染出来时DOM尚未就绪。3 列表动态增删后聚焦/滚动v-for新增项后自动聚焦或滚动到末尾。栗子:template div button clickshowInput显示输入框并自动聚焦/button input v-ifflag refinputRef placeholder我会自动聚焦 / /div /template script setup langts import { ref, nextTick } from vue const flag ref(false) const inputRef refHTMLInputElement | null(null) const showInput async () { flag.value true await nextTick() inputRef.value?.focus() } /scripttemplate div button clickaddMsg新增一条消息/button div classmsg-box refboxRef div classmsg-item v-foritem in msgList :keyitem.id {{ item.content }} /div /div /div /template script setup langts import { ref, nextTick } from vue const msgList ref([ { id: 1, content: 消息1 }, { id: 2, content: 消息2 }, ]) const boxRef refHTMLDivElement | null(null) const addMsg async () { const newId Date.now() msgList.value.push({ id: newId, content: 新消息${newId} }) await nextTick() if (boxRef.value) { boxRef.value.scrollTop boxRef.value.scrollHeight } } /script style scoped .msg-box { width: 300px; height: 200px; border: 1px solid #ccc; overflow-y: auto; } .msg-item { padding: 4px; } /style注意1 仅返回PromiseVue3的nextTick()不再支持传入回调函数必须用await或.then()。2 避免滥用能用声明式模板/计算属性解决的问题不要用nextTick手动操作DOM。3 错误处理await nextTick()可能因组件卸载等抛出异常建议用try/catch包裹。
