input获取焦点vue_VUE项目中，input二次获取焦点问题

二次获取焦点

今天在项目中有个功能，点击搜索icon，则显示文本框并获取焦点

类似于弹窗后获取文本框焦点

功能：

1、点击搜索icon

2、切换input框并获取焦点

如果只需要一次获取焦点只需要在标签加个autofocus属性即可

解决方法：

1、使用ref，操作dom

2、this.$refs.gain.focus()

这样发现还是没有效果

和同事讨论一下，猜测可能是dom渲染的先后顺序，于是加了

Vue.nextTick()，延迟50毫秒

以上代码就能搞定啦

最后贴上vue中dom的渲染过程

1、响应式监听data属性的getter setter2、模板编译模板到render函数再到vnode。模板不是html，有指令、插值、js表达式，能够实现循环、判断。html是标签语言，只有js才能实现循环判断。因此，模板一定要转化成js，即编译模板。模板编译为render函数、执行render函数返回的vnode3、收集依赖在模板中使用那个变量就把那个变量观察起来(watch)，这部分主要实现了从vdom转化为真实DOM、vnode新旧节点的对比操作。

数据更改触发的渲染过程1、初次渲染过程1)解析模板为render函数2)触发响应式，监听data属性的getter、setter3)执行render函数，生成vnode、patch(elem.vnode)2、更新过程1)修改data，触发setter2)重新执行render函数，生成newVnode3)patch(vnode,newVnode)更新视图 

参考：https://www.jianshu.com/p/9e5b89161add(vue中渲染流程分析、归纳及总结)

如果你有更简单的方法，请在下方留言告诉我吧~~

完