Vue 3.0 組合式API 模板引用

本節(jié)代碼示例使用單文件組件的語(yǔ)法

本指南假定你已經(jīng)閱讀了組合式 API 簡(jiǎn)介和響應(yīng)性基礎(chǔ)。如果你不熟悉組合式 API，請(qǐng)先閱讀此文章。

在使用組合式 API 時(shí)，響應(yīng)式引用和模板引用的概念是統(tǒng)一的。為了獲得對(duì)模板內(nèi)元素或組件實(shí)例的引用，我們可以像往常一樣聲明 ref 并從 setup() 返回：

<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>這是根元素</div>
      })
      return {
        root
      }
    }
  }
</script>

這里我們?cè)阡秩旧舷挛闹斜┞?root，并通過(guò) ref="root"，將其綁定到 div 作為其 ref。在虛擬 DOM 補(bǔ)丁算法中，如果 VNode 的 ref 鍵對(duì)應(yīng)于渲染上下文中的 ref，則 VNode 的相應(yīng)元素或組件實(shí)例將被分配給該 ref 的值。這是在虛擬 DOM 掛載/打補(bǔ)丁過(guò)程中執(zhí)行的，因此模板引用只會(huì)在初始渲染之后獲得賦值。

作為模板使用的 ref 的行為與任何其他 ref 一樣：它們是響應(yīng)式的，可以傳遞到 (或從中返回) 復(fù)合函數(shù)中。

#JSX 中的用法

export default {
  setup() {
    const root = ref(null)
    return () =>
      h('div', {
        ref: root
      })
    // with JSX
    return () => <div ref={root} />
  }
}

#v-for 中的用法

組合式 API 模板引用在 v-for 內(nèi)部使用時(shí)沒(méi)有特殊處理。相反，請(qǐng)使用函數(shù)引用執(zhí)行自定義處理：

<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>