当前位置：首页 > news >正文

♥ vue中$nextTick()

news 2025/7/14 6:53:07

♥ vue中$nextTick()

① 语法


this.$nextTick(回调函数)

② 作用

在下一次 DOM 更新结束后执行其指定的回调

使用时机----(比方Echarts地图的渲染)
当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

③ 案例:

实现点击按钮，使用文本框对页面中的标题数据进行修改，且文本框能够自动获取焦点，文本框失去焦点保存修改后的标题，且文本框隐藏

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="root"><h1>{{title}}</h1><input type="text" v-model="title" v-show="isEdit" ref="inputTitle" @blur="handlerBlur"><button v-show="!isEdit" @click="handlerEdit">点击修改标题</button></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const vm = new Vue({el: '#root',data: {title: 'hello world',// 是否处于编辑状态isEdit: false},methods: {// 对标题进行编辑handlerEdit() {// 修改状态为编辑状态this.isEdit = !this.isEdit// 直接让输入框获取焦点// 此时函数中的代码还未完全执行完成，vue不会进行模板的重新解析// 所以更新后的还未放入页面，此时获取焦点无效// this.$refs.inputTitle.focus()// 使用nextTick()在页面解析完成后让文本框获取焦点// 基于更新后的新输入框进行操作，使其获取焦点this.$nextTick(() => {this.$refs.inputTitle.focus();})},// 处理文本框失去焦点handlerBlur() {// 修改状态为不处于编辑状态this.isEdit = !this.isEdit}},
})
</script></html>