♥ 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/[email protected]/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>