$nextTick官方解读:
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
下面我们来看个例子:
需求:点击编辑,显示出输入框更改姓名。
<div class="box">
<span>姓名:</span>
<span v-show="!isShow">{{ name }}</span>
<input class="ipt" v-show="isShow" v-model="name" type="text" />
<button class="btn" @click="handleEdit()">编辑</button>
</div>
handleEdit() {
this.isShow = true;
},
很显然,这一步没任何难度,但是为了用户体验,我们想在显示输入框的时候,顺便让输入框获取焦点,这样用户就可以直接输入,而不需要点一下输入框才能输入。
<input
ref="iptRef"
class="ipt"
v-show="isShow"
v-model="name"
type="text"
/>
handleEdit() {
this.isShow = true;
this.$refs.iptRef.focus();
},
或许你会想到像上面这样写,很遗憾并不会有效果。因为我们将isShow改为true的时之后,vue并不会立即更新我们的视图,而是会等到这个方法结束之后才会更新。为什么会这样呢?你想想如果你一个方法里要修改十个data里的值,那是不是要更新十次视图啊,是不是要做十次diff呢?所以当我们执行iptRef.focus时,输入框的display还为none
可以怎么做?
handleEdit() {
this.isShow = true;
setTimeout(() => {
this.$refs.iptRef.focus();
});
},
我们将其放在定时器里,让同步任务执行完后在来执行这个宏任务。
应该怎么做?
handleEdit() {
this.isShow = true;
this.$nextTick(function () {
this.$refs.iptRef.focus();
});
},
没错,使用$nextTick才是最优解