今天再看vue-element-admin代码得时候看到了一些自己不理解的东西,查阅之后随手记录一下
vue-element-admin登录界面的代码有一个密码输入框睁眼闭眼的功能,用了绑定inputType,点击改变data值,再通过三元表达式,控制icon的样式
然后看到了
this.$nextTick(() => {
this.$refs.password.focus();
});
Vue.nextTick()
初步的理解就是,当我们在代码中修改了其他值,例如在上面方法中修改了passwordType, 但紧接着在下面打印值时,出现的是原来未修改的值
但使用后
原因:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM,
使用 $nextTick 后得到的就是修改后的值