vue3 - 可復用 & 組合 - 組合式API - 模板引用

總結

• 獲取dom，vue 2中的 ref
  • 在掛載或虛擬 DOM 補丁算法中，如果 VNode 的 ref 鍵對應於渲染上下文中的 ref，則 VNode 的相應元素或組件實例將被分配給該 ref 的值。（會觸發響應嗎？）
  • 作為模板使用的 ref 的行為與任何其他 ref 一樣：它們是響應式的，可以傳遞到 (或從中返回) 復合函數中。（這個響應應該只停留在第一層？）

<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(() => { 
        console.log(root.value) 
      })
      return {
        root
      }
    }
  }
</script>

<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([])
      onBeforeUpdate(() => {
        divs.value = []
      })
      return {
        list,
        divs
      }
    }
  }
</script>

• setup 可以返回 vnode 對象，vue 2中好像不行

export default {
  setup() {
    const root = ref(null)

    return () =>
      h('div', {
        ref: root
      })

    // with JSX
    return () => <div ref={root} />
  }
}

原文地址 v3.cn.vuejs.org

在使用組合式 API 時，響應式引用和模板引用的概念是統一的。為了獲得對模板內元素或組件實例的引用，我們可以像往常一樣聲明 ref 並從 setup() 返回：

注釋：響應式引用是指通過 ref 等包裝后的對象的引用，模板引用是指 ref 綁定捕獲 dom 元素

<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(() => {
        
        console.log(root.value) 
      })

      return {
        root
      }
    }
  }
</script>

這里我們在渲染上下文中暴露 root，並通過 ref="root"，將其綁定到 div 作為其 ref。在虛擬 DOM 補丁算法中，如果 VNode 的 ref 鍵對應於渲染上下文中的 ref，則 VNode 的相應元素或組件實例將被分配給該 ref 的值。這是在虛擬 DOM 掛載 / 打補丁過程中執行的，因此模板引用只會在初始渲染之后獲得賦值。

注釋：2.0中 vnode 不包含 ref 屬性

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

疑問：整個 dom 都是可響應的嗎？應該是只有這個 ref 才是可響應的吧。

# JSX 中的用法

export default {
  setup() {
    const root = ref(null)

    return () =>
      h('div', {
        ref: root
      })

    // with JSX
    return () => <div ref={root} />
  }
}

# v-for 中的用法

組合式 API 模板引用在 v-for 內部使用時沒有特殊處理。相反，請使用函數引用執行自定義處理：

注釋：在 2.0 中，模板使用場景時 v-for 和 ref 共同使用會生成 dom 數組。jsx 中使用時會根據配置項 refInFor 決定是生成 dom 數組，還是最后一個捕獲的 dom

<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([])

      
      onBeforeUpdate(() => {
        divs.value = []
      })

      return {
        list,
        divs
      }
    }
  }
</script>