Vue - input文本框自动获取焦点的问题

---

功能: 在文本框展示出来的那一刻,让它自动获取焦点

1.在input的框里写入 ref="iptRef"(起名用Ref为后缀,辨认是引用) 先拿到DOM元素

2.在 methods 里调用 focus()方法, 如下图所示:

3.此时会发现报错,这是为什么呢?
Cannot read property 'focus' of undefined
意思是:无法读取“focus”方法前面未定义的内容 (经验论证:正确理解)

报错原因:
原因就出在"this.inputVisible = true",此时数据虽然变化了,但是文本框还没有渲染展示到页面上,所以就拿不到它的引用ref,去调用focus()方法就会报错为 undefined;

解决问题:
Vue提供了一个方法 this.$nextTick(回调函数)
组件的$nextTick(cd)方法,会把cd回调推迟到下一个DOM更新周期之后执行.通俗的理解是:等组件的DOM 更新完成之后,在执行cd回调函数.从而保证cd回调函数可以操作到最新的 DOM 元素.

---

注意: 如果在生命周期函数里的 Updated()中用,会报错,因为Updated函数当数据发生变化的时候就会重新渲染组件DOM结构 (生命周期函数和methods是并列关系)