关于vue.js: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是并列关系)