Vue.js中ref ($refs)用法举例总结及应注意的坑

一、Vue.js中ref ($refs)用法举例总结及应注意的坑

看Vue.js文档中的ref部分，自己总结了下ref的使用方法以便后面查阅。

1、如果通过v-for遍历想加不同的ref时记得加:号，即:ref=某变量;

这点和其他属性一样，如果是固定值就不需要加:号，如果是变量记得加:号

2、通过:ref=某变量添加ref（即加了:号）,如果想获取该ref时需要加 [0]，如 this.$refs[refsArrayItem] [0]；如果不是:ref=某变量的方式而是 ref=某字符串时则不需要加，如 this.$refs[refsArrayItem]

3、想在element ui对话框打开后取dom时，应该使用$nextTick，而不是直接使用 this.$refs. imgLocal2：

二、Node.js定时器中的ref函数和unref函数

1、JavaScript中的定时操作主要依赖 setTimeout和 setInterval函数实现。这两个方法会在指定时间后将回调函数放入调用栈的最后。setTimeout仅执行一次，而 setInterval则循环执行。

2、清除定时操作可通过 clearTimeout和 clearInterval函数实现，操作过程清晰。在浏览器和Node.js中，均可使用此功能。

3、此外，还有 ref和 unref两个函数，它们与清除定时器相关联，但在性质上较为特殊，网上中文资料较少。这两个函数均在定时器对象内，使用方法如下：

4、unref可以大致理解为，在程序无其他定时器时，关闭定时器。

5、ref函数则可以理解为，在调用 unref关闭定时器后，再次调用 ref可以恢复定时器。

6、当存在单一定时器时，unref取消定时，定时器未执行。

7、若使用 ref函数，先调用 unref关闭定时器后，对同个定时器再次调用 ref可以恢复定时。

8、若存在两个定时器，第二个定时器 timer2正在执行，此时调用 unref关闭第一个定时器 timer1。有趣的是，unref操作并未生效，timer2仍输出结果。

9、这表明，如果有其他定时器存在，unref将不会生效。

10、再观察以下例子：在设置定时器后调用 unref，再监听 stdin的输入事件。此时，事件循环非空，但只有一个 timer定时器存在。

11、结果显示，unref未产生效果，定时器仍被输出。这说明，unref是否有效取决于程序运行时是否存在事件循环，而不只是依赖于定时器本身。

12、以上内容由前端新手整理，如有错误欢迎指正。

三、js元素聚焦(vue)

1、其实聚焦本质上还是调用js的原生方法 focus()，也就是说如果你想要某个DOM节点聚焦，只需要它调用这个方法就可以

2、当弹窗打开时，自动聚焦到 input输入框。

3、看似很简单，但是有两个容易出问题的地方：

4、当弹窗的开关变量为true时，你让相应的元素聚焦，但此时可能弹窗并没有渲染完成

5、当你使用第三方组件的 Input输入框时，你为这个输入框标记了 ref，但是获取到的是这个组件，而并不是组件中的 input

6、而你使用原生的 input元素则不会有这个问题