Vue 3中$ref可获取目标对象但$el为undefined该如何解决？

你出现该问题的核心原因是混淆了Vue中ref绑定在不同对象上的返回值规则：
当ref绑定在原生HTML元素上时，this.$refs.xxx直接返回对应DOM元素本身，不需要额外访问.$el属性。.$el是Vue组件实例才有的属性，用于获取组件对应的根DOM元素，原生DOM对象本身不存在该属性，因此访问会返回undefined。

你的代码中ref="refColor"绑定的是原生<input>标签，所以this.$refs.refColor本身就是你要的input DOM元素。

把mounted中的取值代码修改为以下内容即可：

mounted() {
  debugger;
  var x = this.$refs.refColor;  
  // 此时x就是input的DOM元素，可以直接操作value、style等属性
}

你可以根据使用场景区分ref的返回值：

• 给原生HTML标签加ref：this.$refs.xxx 直接返回DOM对象
• 给自定义Vue组件加ref：this.$refs.xxx 返回组件实例，需要访问实例的.$el才能拿到组件对应的根DOM元素

内容的提问来源于stack exchange，提问作者Pinch