Vue3 + Vite + Ts 关于ref和v-model对应的字段的感悟

问题发现：

有这么一段代码

<input
   type="text"
   class="newAdress"
   ref="newAdress"
   placeholder="请输入地址"
   v-model="newAdress"
/>

ref 和 v-model 对应的字段名称都一样（前提：newAdress 的值为空（不为空也不影响））

如果运行后会发现，输入框的内容显示变成：[object HTMLInputElement]

浏览器打印字段 newAdress 发现值变成了 input 的dom节点了。如下图

那么是不是获取元素dom的方式，除了通过 ctx.$ref 或 proxy.$ref 来获取dom元素了，还可以通过绑定变更了名来获取 dom ？。 

 实践

html

<input
  type="text"
  class="newAdress"
  ref="newAdressRef"
  placeholder="请输入地址"
  v-model="newAdress"
/>

js:

<script setup lang="ts">
import { ref, provide, reactive } from "@vue/reactivity";
import { onMounted } from "vue";
const newAdress = ref("")
const newAdressRef = ref("")
</script>

 对元素 Dom 操作前：

 

  对元素 Dom 操作：

在onMounted中添加一句 newAdressRef.value.style.background = "red";

<script setup lang="ts">
import { ref, provide, reactive } from "@vue/reactivity";
import { onMounted } from "vue";
const newAdress = ref("")
const newAdressRef = ref("")
onMounted(() => {
  newAdressRef.value.style.background = "red";
});
</script>

结果 

由此可见是可行的。

最后：

开发是为了项目上线运行，所以打包，看看不会对打包后有影响。上线。ok

 由此可见是该方法是可行的