vue3.0 ref 获取标签 dom

简单明了直接上代码

<template>
  <div>
    <input type="text" ref="inputRef" value="1111" />
    <input type="text" ref="input2Ref">
    <span>123</span>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
export default {
  setup() {
    const inputRef = ref(null);

    onMounted(() => {
      console.log(inputRef.value); /** 这是inputDom */
      console.log(inputRef.value.value) /** 1111 */ 
    });
    return { inputRef };
  },
  mounted() {
    console.log(this.$refs.input2Ref)
  }
};
</script>

<style></style>

ref的本质是转为reactive

ref(18) 转为 reactive（{value:18}）

所以取值的时候比以前多一个.value。

setup的执行期间是在 beforeCreate和created之间执行的，而这个时候dom还未被挂载，所以直接在setup中获取dom是不可能成功的，只能在setup的生命周期onMounted及以后获取dom。

原先vue2.0ref获取dom依然可用