Vue.js 方法的放置是否会影响性能和/或应用程序大小？

Question

我有一个列表组件和一个循环项目组件，如下所示：

RoomList.vue

<template>
  <ul id="TheRoomList">
    <button
      id="TheCreateRoomButton"
      @click="createRoom()"
      :disabled="createRoomIsDisabled"
    >
      <span v-if="createRoomIsDisabled">Loading...</span>
      <span v-else>Create Room</span>
    </button>
    <div v-if="rooms.length === 0">Loading...</div>
    <div v-else>
      <room-item v-for="room in rooms" :key="room.id" :room="room" />
    </div>
  </ul>
</template>

<script>
import RoomItem from "./RoomItem.vue";

export default {
  components: { RoomItem },

  data: () => ({
    createRoomIsDisabled: false,
    rooms: [],
  }),

  methods: {
    async createRoom() {
      this.createRoomIsDisabled = true;

      const newRoom = await this.$db.collection("rooms").add({
        creator: this.$auth.currentUser.email,
        created_at: new Date(),
      });

      this.$router.push(newRoom.id);
    },
  },

  created() {
    this.$bind(
      "rooms",
      this.$db.collection("rooms").orderBy("created_at", "desc")
    );
  },
};
</script>

RoomItem.vue

<template>
  <li id="Room" :data-id="room.id">
    <a :href="room.id" target="_blank" style="font-family: monospace">{{
      room.id.toUpperCase()
    }}</a>
    <button v-if="room.creator === $user.email" @click="deleteRoom()">
      Delete
    </button>
  </li>
</template>

<script>
export default {
  props: {
    room: Object,
  },

  methods: {
    deleteRoom() {
      this.$db.collection("rooms").doc(this.room.id).delete();
    },
  },
};
</script>

可以将方法放在循环组件中吗？它会影响性能和/或应用大小吗？

我可以将事件发送到父组件中，但它会使父组件因方法而膨胀（将来）。所以，如果是这样，那我别无选择。

Answer 1

不，它不会以任何不好的方式影响它的性能。
您可以在开发工具中单击特定组件后使用$vm0 选择它，以检查特定组件上的所有可用设置器（与methods 相关）。

然后，在选定的对象中向下滚动，您将看到所有的 getter/setter。

如this awesome answer 中所述，拥有这些 getter/setter 完全没问题。

PS：我也同意Prashant顺便推荐的课程。

最后一件事，当你写@click="deleteRoom()" 时，更喜欢写@click="deleteRoom"，因为deleteRoom() 基本上是在说“设置回调并直接运行它而不是只等待回调”。

Answer 2

没有。每个组件将只编译一次。子组件中的方法数量对性能或包大小几乎没有影响。你的例子很小。

计算可能会影响性能，但这很大程度上取决于您的数据结构和更新频率。

如果您谈论的是“非常”长的循环（列表中有 1000-3000 多个组件），您可以试试这个：

Virtual Scroll List

Example with infinite scroll

例如，Twitter 就是这样做的。它允许您呈现非常长的列表，其中包含相对较重的组件并且对性能的影响最小。