• ref
• toRef
• toRefs
• isRef
• unRef
• ref(null) =>getDocumentForHtml

ref 获取DOM节点

在普通节点使用

  <el-row >
    <el-col :span="24">
    <el-button @click="conref" class="btn primary">hello world</el-button>
      <div ref="btnr"> hellow </div>
    </el-col>
  </el-row>    

<script setup>
// @ is an alias to /src
import { onMounted, reactive, ref,toRefs } from "vue"

const btnr = ref(null)

const conref = ()=>{
  btnr.value.innerText = '你好啊'
  console.log(btnr.value)
}


</script>

在v-for使用

<template>
    <div class="menu_root">
        <el-button @click="consoList" class="primary">show El</el-button>
       <!-- 获取 ul>li dom 节点 -->
       <ul>
            <li v-for="(item, index) of nums" 
            :key="index" 
            :ref="el => { if (el) list[index] = el }">

                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
    name: 'Menu',
    setup() {

        const list = ref([])
        const nums = reactive([
            {
                id: 1,
                name: '11'
            },
            {
                id: 12,
                name: '112'
            },
            {
                id: 13,
                name: '113'
            }
        ])
        const consoList = () => {
            console.log(...list.value)
        }

        return {
            nums, consoList, list
        }
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.menu_root {
    background-color: #d2db51;
}
</style>