共计 513 个字符，预计需要花费 2 分钟才能阅读完成。
性能: 在文本框展现进去的那一刻, 让它主动获取焦点
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 是并列关系)
正文完
