17、Vue3 操作Dom

某些情况下，我们仍然需要直接访问底层 DOM 元素，要实现这一点，我们可以使用特殊的 ref attribute

案例

<template>
  <input ref="input" type="text" value="ref">
  <div>
    <ul>
        <li ref="refarr" v-for="item in arr1">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core';
export default {
    setup(){
        let isShow = ref(2)
        //
        let input = ref();

        //
        onMounted(()=>{
            // 
            let inputEl = input.value;
            console.log('input ref11 ===', input, inputEl.value);
        })

        //
        let arr1 = ref([
            {name: 1},
            {name: 2},
            {name: 3},
        ])
        let refarr = ref([])
        //
        onMounted(()=>{
            // 
            console.log('refarr ===', refarr.value);
        })

        return {
            input,
            refarr,
            arr1
        }
    }
}
</script>