在 Vue.js 中搜索反应数组 3

Question

在 Vue.js 3（测试版）中，我使用 reactive 定义了一个数组，因为我想将其内容绑定到循环中的某些 UI 控件。到目前为止，一切正常。

现在，我需要更新此数组中的一个值，这意味着我需要在此数组上运行一个 find 或一个 findIndex。由于数组由 Vue.js 代理，因此无法按预期工作：代理不是简单的普通旧数组。

我所做的是在那个副本上使用 toRaw、运行 findIndex 获取副本，然后使用索引更新原始数组。这样可以，当然看起来不是很优雅

有没有更好的方法来解决这个问题？

PS：如果是只适用于Vue 3的方案就好了，我不关心2.x系列

Answer 1

数组的所有方法仍然可以通过 Proxy 访问，因此您仍然可以在其上使用 find 或 findIndex:

import { reactive } from 'vue'

const items = reactive([1,2,3])

console.log(items.find(x => x % 2 === 0))
console.log(items.findIndex(x => x % 2 === 0))

const MyApp = {
  setup() {
    const items = Vue.reactive([1,2,3])
    
    return {
      items,
      addItem() {
        items.push(items.length + 1)
      },
      logFirstEvenValue() {
        console.log(items.find(x => x % 2 === 0))
      },
      logFirstEvenIndex() {
        console.log(items.findIndex(x => x % 2 === 0))
      },
      incrementItems() {
        for (let i = 0; i < items.length; i++) {
          items[i]++
        }
      }
    }
  }
}

Vue.createApp(MyApp).mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.5"></script>
<div id="app">
  <button @click="logFirstEvenValue">Log first even item</button>
  <button @click="logFirstEvenIndex">Log index of first even item</button>
  <button @click="incrementItems">Increment items</button>
  <button @click="addItem">Add item</button>
  <ul>
    <li v-for="item in items">{{item}}</li>
  </ul>
</div>

在 Vue.js 中搜索反应数组 3

Searching a reactive array in Vue.js 3

javascript

arrays

vue.js

vuejs3