主页 / user-13438431

winwin's questions

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

我想对通过循环v-for遍历任意对象集合创建的模板引用元素数组所做的更改做出反应。我想将此数组传递给组件/可组合项并让其对更改做出反应。

文档提供了一种将这些元素保存到数组的方法：https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for

我修改了提供的示例，以查看生成的itemsRef数组是否具有响应性。代码如下：

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

但从其 TypeScript 签名来看，的返回值useTemplateRef似乎是：ShallowRef

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

因此watch实际上itemRefs只运行一次：

浅层参考

如您所见，数组的内容正在发生变化（已更新），但vue 未捕获到list这些变化。我尝试进行深度处理，但没有帮助。itemRefswatch

有没有办法让 ref 不那么浅？或者还有其他方法？

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

我想以原子方式设置列表的所有值SET，就像常规命令一样。

我需要它，因为该列表是数据库查询的缓存表示。我想通过使用“分页”模式访问缓存LRANGE。

我想过使用RPUSH，但如果发生竞争条件，我的缓存将包含多组相继的重复结果，我不喜欢这样。

与已知列表长度的LTRIMRPUSH结合使用在大多数情况下应该有效，但在数据源返回不同结果集并且我们在 上存在竞争条件的情况下，它可能会失败。当然，这种情况发生的可能性要小得多，但仍然存在。LTRIM

以索引作为权重的方法SORTED SET也面临着类似的问题。

使用 redis 的事务似乎有点大材小用：就我而言，它们会停止所有其他传入命令，直到事务结束 - 并且缓存的结果集可能是一大块。

然而，DEL到目前为止，RPUSH交易似乎是唯一的选择。是不是真的？

redis