vue3中ref绑定dom或者组件失败的原因及分析

function addFilterPropertyRule(row) {

    let ruleParamObj = JSON.parse(row.hardwareParam)
    if (ruleParamObj) {
        makePropertityTree(ruleParamObj, treeData)
    }
    addOrEditRuleVisible.value = true
    currentRuleItem = row
    if (row.ruleJson) {
        nextTick(() => {
            treeRef.value.setCheckedNodes(JSON.parse(row.ruleJson), false)
        })
    }
}

<template>
  <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
    {{ item }}
  </div>
</template>
 
<script>
  import { ref, reactive, onBeforeUpdate } from 'vue'
 
  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])
 
      // 确保在每次更新之前重置ref
      onBeforeUpdate(() => {
        divs.value = []
      })
 
      return {
        list,
        divs
      }
    }
  }
</script>

<template> 
  <div ref="root">This is a root element</div>
</template>
 
<script>
  import { ref, onMounted } from 'vue'
 
  export default {
    setup() {
      const root = ref(null)
 
      onMounted(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value) // <div>This is a root element</div>
      })
 
      return {
        root
      }
    }
  }
</script>