ref 获取 dom 和 document 方法 获取 dom 有什么区别

ref(reference 引用)

• ref 用来在父元素上 给元素或子组件注册引用信息。引用信息注册在父组件的$refs 对象上。
  • 如果 ref 用在普通元素上，引用指向的是 dom 元素；
  • 如果 ref 用在子组件上，引用指向组件实例。
• document 方法无论用在普通元素还是子组件上都只能获取到单纯的 dom 元素，不能获取实例实例

使用 ref 获取 dom 效率比 document 方法效率更高

获取dom ref 和 document如何选择：

• 操作组件内部的普通元素或子组件时使用 ref
• 操作本组件外部的 dom 元素必须要 document 方法，在文档全局查找 dom 元素

vue3 中获取组件实例的方法：

方式一：给组件添加 ref 属性，通过ref获取

<childCom ref="childComRef" id="childComID" />
<script>
  import childCom from './childCom.vue' // 在vue3中组件只要引入就能使用，不需要手动注册
  import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
  let childComRef = ref()
  onMounted(() => {
    console.log('childComRef', childComRef)
    console.log('childComRef.value', childComRef.value)
  })
</script>

方式二：获取父组件实例，通过组件实例获取

<childCom ref="childComRef" id="childComID" />
<script>
  import childCom from './childCom.vue' // 在vue3中组件只要引入就能使用，不需要手动注册
  import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
  let curInstance = getCurrentInstance()
  onMounted(() => {
    console.log('curInstance', curInstance)
    console.log(
      'curInstance.ctx.$refs.childComRef',
      curInstance.ctx.$refs.childComRef,
    )
  })
</script>

vue3 中获取 dom 元素的方法：

<childCom ref="childComRef" id="childComID" />
<div ref="divRef" id="divID">div dom</div>
<script>
  import childCom from './childCom.vue' // 在vue3中组件只要引入就能使用，不需要手动注册
  import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
  onMounted(() => {
    // document获取普通元素 dom
    let divDom = document.querySelector('#divID')
    // document获取子组件 dom
    let childComDom = document.querySelector('#childComID')
    console.log('childComDom', childComDom)
    console.log('divDom', divDom)
  })
</script>