Refs — Multiple Templates & Conditional Rendering

同学们，今天我们来聊聊多模板组件中的 refs 是如何工作的，这个话题其实非常直观。 想象一下，你的组件会根据不同条件渲染不同的模板。比如，有时候显示模板 A，有时候显示模板 B。而 this.refs 就像是一个智能的小助手，它永远只指向当前屏幕上那个真正活跃的模板里的元素。 具体来说，当你的 render() 方法返回不同的模板时，refs 对象会立刻更新，它会丢弃上一个模板里的所有引用，只保留新模板里定义的 refs。也就是说，旧的 refs 你就访问不到了。 我们来看一个典型的增量示例：假设有一个计数器，每当你调用增量函数时，它会在模板 A 和模板 B 之间切换。每次切换时，你都可以在代码里打印出 this.refs，你会发现它总是只反映当前模板里的元素，之前模板里的引用已经完全被清除了。 这种机制在搭配 lwc:if 或 lwc:else 条件渲染时特别好用。你甚至可以在两个分支中使用完全相同的 ref 名称。比如，你可以在 if 和 else 分支里都放一个按钮，并都给它们设置 ref="toggleDarkMode"，这时 this.refs.toggleDarkMode 就会自动引用当前现实在页面上的那个按钮——不管它是哪个分支渲染出来的。这种写法比故意取不同的 ref 名字、然后自己判断哪个被定义了要清晰干净得多。 所以，记住一点：this.refs 是与当前活动模板动态绑定的，它让你无需手动管理模板切换带来的引用清理问题，代码更简洁也更安全。 好了，这个小点大家理解了吗？有什么问题可以随时问我。