Início / coding / Perguntas / 79031309
Accepted
winwin
Asked: 2024-09-27 20:15:37 +0800 CST

useTemplateRef não é reativo para matrizes?

  • 772

Gostaria de reagir a alterações feitas em um array de elementos de referência de template criados com um v-forloop sobre alguma coleção de objetos arbitrários. Gostaria de passar esse array para um componente / composable e fazê-lo reagir às alterações.

A documentação fornece uma maneira de salvar esses elementos em uma matriz: https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for

Modifiquei o exemplo fornecido para ver se o itemsRefarray resultante seria reativo. O código é:

<script setup>
import { ref, useTemplateRef, watch, markRaw } from 'vue'

const list = ref([1, 2, 3])

const itemRefs = useTemplateRef('items')

watch(itemRefs, () => {
  console.log("itemsRef:", itemRefs.value.length);
}, {deep: true});

watch(list, () => {
  console.log("list:", list.value.length, itemRefs.value.length);
}, { deep: true });
</script>

<template>
  <button @click="list.push(list.length + 1)">add</button>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

Mas o valor de retorno de useTemplateRefparece ser um ShallowRef, a julgar pela sua assinatura TypeScript:

function useTemplateRef<T>(key: string): Readonly<ShallowRef<T | null>>

Então o watchon itemRefsrealmente é executado apenas uma vez:

referência rasa

Como você pode ver, o conteúdo do array está mudando ( listé atualizado), mas as mudanças itemRefsnão são capturadas pelo vue. Eu tentei fazer o watchdeep, mas não ajudou.

Existe uma maneira de fazer o ref não ser superficial de alguma forma? Ou talvez haja outra maneira?

const { createApp, ref, useTemplateRef, watch, markRaw } = Vue;

const app = createApp({
  setup() {
    const list = ref([1, 2, 3]);

    const itemRefs = useTemplateRef('items');

    watch(itemRefs, () => {
      console.log("itemsRef: ", itemRefs.value.length);
    }, { deep: true });

    watch(list, () => {
      console.log("list: ", list.value.length, itemRefs.value.length);
    }, { deep: true });
    
    return { list }
  }
});

app.mount('#app');
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <button @click="list.push(list.length + 1)">add</button>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</div>

javascript

2 respostas

  1. itemRefs é atualizado (por exemplo, reativo). Mas é sempre atualizado 1 ciclo de renderização apóslistter mudado.

    Envolva seu console.logem nextTick(importado de 'vue') e os números corresponderão:

    const { createApp, ref, useTemplateRef, watch, nextTick } = Vue

const app = createApp({
  setup() {
    const list = ref([1, 2, 3])
    const itemRefs = useTemplateRef('items')
    watch(
      itemRefs,
      () => {
        console.log('itemsRef: ', itemRefs.value.length)
      },
      { deep: true }
    )
    watch(
      list,
      () => {
        nextTick(() =>
          console.log('list: ', list.value.length, itemRefs.value.length)
        )
      },
      { deep: true }
    )
    return { list }
  }
})

app.mount('#app')
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <button @click="list.push(list.length + 1)">add</button>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</div>

    Observe também que você não pode assistir profundamente, pois é uma ref superficial . Para conseguir essa funcionalidade, use um normal ref:

    const { createApp, ref, watch, nextTick } = Vue

const app = createApp({
  setup() {
    const list = ref([1, 2, 3])
    const items = ref([])
    watch(
      items,
      () => {
        console.log('itemsRef: ', items.value.length)
      },
      { deep: true }
    )
    watch(
      list,
      () => {
        nextTick(() =>
          console.log('list: ', list.value.length, items.value.length)
        )
      },
      { deep: true }
    )
    return { list, items }
  }
})

app.mount('#app')
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <button @click="list.push(list.length + 1)">add</button>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</div>

    • 2
  2. Best Answer

    Usar const elements = ref([])with ref="elements"dentro de a v-fornão garante ordem, conforme a documentação do vue .

    Além disso, se você ref="elements"for um Componente, o elementsarray estará cheio de ComponentPublicInstanceelementos.

    Para combater isso, usei esse gist como base e criei este composable:

    export const useTemplateRefs = (elements: Ref<HTMLElement[]>) => {
  onBeforeUpdate(() => {
    elements.value = [];
  });
  const setElement = (elem: Element | ComponentPublicInstance | null, index: number): void => {
    if (elem == null) {
      return;
    }
    if (elem instanceof Element) {
      if (elem instanceof HTMLElement) {
        elements.value[index] = elem;
        return;
      }
    } else if (elem.$el instanceof HTMLElement) {
      elements.value[index] = elem.$el;
      return;
    }
    throw new Error("Unexpected element type");
  };
  return setElement;
};

    Que pode ser usado desta forma:

    <script setup lang="ts">
const messages = ref([{id: 1, text: "Message"}]);
const messageRefs = ref<HTMLElement[]>([]);
const setRef = useTemplateRefs(messageRefs);
</script>

<template>
  <div class="container">
  <div
      v-for="(message, index) in messages"
      :key="message.id"
      :ref="el => setRef(el, index)"
    >
      {{ message.text }}
    </div>
  </div>
</template>

    Agora o messageRefsarray está totalmente reativo e em sincronia total com messageso array.

    • 0

relate perguntas