在 Vue JS 中访问 $refs 以提取数据的性能问题答案

【问题标题】：Performance concern accessing $refs in Vue JS to pull data在 Vue JS 中访问 $refs 以提取数据的性能问题
【发布时间】：2019-09-15 16:12:08
【问题描述】：

概述：

我正在 Nuxt JS 2.9.2 中构建一个混合应用程序，它使用 Axios 通过 GET 请求提取数据。用户可以（通过表单向导）将对象添加到数组中，每个对象包含 X 个字段，以及通过 URL 访问的唯一 slug，例如：http://localhost:3000/#/url/slug

问题是，我的数组可能包含多达 10 多个对象，每个对象可能包含 5 多个键/值对。

问题：

我现在最大的问题是性能和最佳实践。我需要能够从我的methods, created, mounted 等中访问单个对象的数据集。

现在，我还需要能够访问每个项目的单独索引以显示数据。

因此，在我的pages/url/_url.vue 文件中，我循环遍历每个对象，这些对象是通过本地存储从计算属性中获取的，然后仅在 slug 时才显示特定对象，通过 URL 匹配的 slug是从对象中获取的。

但我知道，在加载时，所有元素都在 DOM 上呈现，然后将不匹配的元素一一删除，我想知道是否有其他方法可以在不使用我当前的方法的情况下获取数据使用 Vue JS Refs？

我还需要能够访问给定对象键的值，并将其值输出到屏幕上并使用 refs 来获取它，这是我目前唯一的方法吗？

<template>
  <div class="has-safe-area-y fill-height" id="pullto">
    <div v-for="(url, index) in urlsList" :key="url.id" v-if="slug === url.slug">
      <div class="is-hidden">
        <div ref="getId">{{ index }}</div>
        <div ref="getRef1">{{ urlsList[index].item }}</div>
        <div ref="getRef2">{{ urlsList[index].anotherItem }}</div>
        <div ref="getRef3">{{ urlsList[index].foo }}</div>
        <div ref="getRef4">{{ urlsList[index].bar }}</div>
        <div ref="getRef5">{{ urlsList[index].apple }}</div>
        <div ref="getRef6">{{ urlsList[index].cake }}</div>
        <div ref="getRef7">{{ urlsList[index].laravel }}</div>
        <div ref="getRef8">{{ urlsList[index].vue }}</div>
        <div ref="getRef9">{{ urlsList[index].test }}</div>
        <div ref="getRef10">{{ urlsList[index].notification }}</div>
        <div ref="getRef11">{{ urlsList[index].item2 }}</div>
        <div ref="getRef12">{{ urlsList[index].item3 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      slug: this.$route.params.url,
      urlsList: []
    }
  },
  methods: {

    // My methods reference the refs, e.g:
    // this.$refs.getRef2[0].innerText

  }
}
</script>

真正的问题是什么？

我在从挂载中访问对象的值以及使用 Vue JS refs 访问对象的值时是否采用了正确的方法，还有哪些其他选项？

【问题讨论】：

如果这里发生了什么，我不遵循完整的解释。如果urlsList 的内容可以作为data 或道具使用，那么您不需要引用来访问它。你真的应该只需要 refs 来处理奇怪的极端情况，比如以编程方式聚焦输入或使用操作 DOM 的外部库（jquery 插件等）。
这将有助于了解如何调用任何方法。人们常犯的一个错误是他们没有意识到模板可以调用带有参数的方法（然后可以用来识别数据）。

标签： javascript vue.js vue-router nuxt.js

【解决方案1】：

一件事是将循环移动到模板而不是 div 中。我认为它们都在渲染然后被删除，因为您正在循环并在同一个元素上使用条件。

<template v-for="(url, index) in urlsList>
    <div :key="url.id" v-if="slug === url.slug">
    ...
</template>

但是，由于您想要引用显示的项目，我会将循环移动到一个函数中，并且只有在模板中显示的那个。

<div>
  <div class="is-hidden">
    <div>{{ index }}</div>
    <div>{{ display.item }}</div>
    <div>{{ display.anotherItem }}</div>
    <div>{{ display.foo }}</div>
    <div>{{ display.bar }}</div>
    <div>{{ display.apple }}</div>
    <div>{{ display.cake }}</div>
    <div>{{ display.laravel }}</div>
    <div>{{ display.vue }}</div>
    <div>{{ display.test }}</div>
    <div>{{ display.notification }}</div>
    <div>{{ display.item2 }}</div>
    <div>{{ display.item3 }}</div>
  </div>
</div>
...
computed: {
    index() {
        for (url, index) in this.urlsList {
            if (url.slug === this.slug) {
                return index;
            }
        }
    },
    display() {
        return this.urlsList[this.index];
    }
}
...
methods {
    // this.display.anotherItem
}

我没有尝试过，所以不知道代码是否按原样工作，但这是基本思想。

如果有可能显示多个，请将 index() 和 display() 更改为返回列表。不过，同样的想法。

【讨论】：