Vue3中ref的用法举例总结(避免混淆)

<template>
  <div>
    <input ref="myInput" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const myInput = ref(null)
    function focusInput() {
      myInput.value.focus()
    }
    return {
      myInput,
      focusInput
    }
  }
}
</script>

<template>
  <div>
    <Child ref="childComponent" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  setup() {
    const childComponent = ref(null)
    function callChildMethod() {
      childComponent.value.myMethod()
    }
    return {
      childComponent,
      callChildMethod
    }
  }
}
</script>

<template>
  <div>
    <p v-if="isLoading">Loading...</p>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const isLoading = ref(false)
    const timerId = ref(null)
    function fetchData() {
      isLoading.value = true
      timerId.value = setTimeout(() => {
        isLoading.value = false
        clearTimeout(timerId.value)
      }, 3000)
    }
    return {
      isLoading,
      fetchData
    }
  }
}
</script>

<template>
  <ul>
    <li 
      v-for="item in cityList" 
      :key="item.id" 
      :ref="getDom">
      {{item.city}}
    </li>
  </ul>
</template>
<script>
import { onMounted, reactive} from 'vue';
export default {
  setup(){
    const cityList = reactive([
      { city:'武汉', id: '027'},
      { city:'南京', id: '025'},
      { city:'重庆', id: '023'},
    ]);
    // 1.定义一个空数组，接收所有的dom
    const lis = [];
    // 2. 定义一个函数，往空数组push dom
    const getDom = (el) => {
      lis.push(el);
    }
    onMounted(() => {
      console.log(lis,lis[0])
    })
    return {
      cityList,
      getDom,
    } 
  }
}
</script>