Início / user-13438431

winwin's questions

Martin Hope
winwin
Asked: 2024-09-27 20:15:37 +0800 CST
  • 5

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
Martin Hope
winwin
Asked: 2023-12-01 00:32:45 +0800 CST
  • 5

Gostaria de definir atomicamente todos os valores de uma lista, assim como o SETcomando normal.

Eu preciso disso porque a lista será uma representação em cache de uma consulta ao banco de dados. Gostaria de acessar o cache no modo "paginado" usando LRANGE.

Pensei em usar RPUSH , mas se ocorrer uma condição de corrida, meu cache conterá vários conjuntos de resultados duplicados, um após o outro, e eu não gostaria disso.

Usar RPUSHem conjunto com LTRIM o comprimento de lista conhecido deve funcionar na maioria das vezes, mas pode falhar nos casos em que a fonte de dados retornou conjuntos de resultados diferentes e tivemos uma condição de corrida ativada LTRIM. É claro que é muito menos provável que isso aconteça, mas ainda assim.

O SORTED SETuso de índices como pesos sofre de problemas semelhantes.

Usar as transações do Redis parece um exagero: no que me diz respeito, eles interrompem todos os outros comandos recebidos até que a transação termine - e o conjunto de resultados em cache pode ser robusto.

No entanto, DELe RPUSHnuma transação parece ser a única opção até agora. É realmente?

redis