Refs — The Preferred Method for Element Access

好，今天我们来讲一讲在 Lightning Web Components 里怎么正确地拿到页面上的元素，也就是我们常说的 DOM 元素。在 LWC 里面，官方推荐的方法是使用 ref，也就是引用。 你只需要在模板里，给想要拿到的那个元素加上一个 lwc:ref 指令，然后给它起个名字，比如 “myButton”，像这样写：lwc:ref="myButton"。然后，在你的 JavaScript 代码里，就可以直接用 this.refs.myButton 来访问这个元素了，非常简单直接。 这样做的好处很多。它让我们彻底摆脱了以前那种用 CSS 选择器去查找元素的方式，不用再去纠结什么 querySelector 这类东西了。ref 提供的引用是直接的、类型安全的，而且不管你的元素藏在影子 DOM 还是轻型 DOM 里，它的行为完全一致，用起来特别省心。 不过，用 ref 也有几个必须遵守的规则，不然会遇到坑。 第一个，你必须在元素真正渲染出来之后，才能通过 ref 去访问它。一般是在 renderedCallback 这个生命周期钩子里去操作，这时候可以确保元素已经在页面上了。 第二个，如果你在模板里不小心给了多个元素同样的 ref 名字，那 this.refs.那个名字 只能拿到最后一个匹配的元素，前面的不会返回成数组，所以名字最好保持唯一。 第三个，this.refs 这个对象本身是只读的，你不能整体给它替换掉，但你可以去赋值或者修改它暴露出来的引用，只是要小心，这可能会引发组件重新渲染。另外，ref 不能用在 template 标签上，也不能指向你插入到轻型 DOM 的 slot 元素，还有在 for:each 或者 iterator 循环里面也不能使用 lwc:ref，这些情况要用其他办法。 最后还有一个细节：ref 在原型链上是可配置、可写的，也就是说如果你的组件自己定义了一个和基类同名的 ref，它会覆盖掉基类里对应的引用，所以名字不要冲突，避免意外。 总结一下，记住这几点，用 ref 去拿元素就又安全又高效，是我们写 LWC 时候的首选方法。