CODEWITHSUNDEEP
javascriptvue.js
Samsul Arif Zulvian
Samsul Arif Zulvian

Reputation: 58

Does Vue.js methods placement affect performance and/or app size?

I have a list component and a looping item component like so:

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>

Is it okay to place methods inside a looping component? Does it affect performance and/or app size?

I can emmit the events into the parent component, but it will make the parent component bloated by methods (in the future). So, if it does, then I have no choice to that.

Upvotes: 4

Views: 241

Answers (2)

kissu
kissu

Reputation: 46814

No, it does not impact it in any bad way performance-wise.
You can check all the available setters (related to the methods) on a specific component by selecting it with $vm0 after clicking on it in your dev tools.

enter image description here

Then, scroll down in the selected object and you will see all the getters/setters. enter image description here

Having those getters/setters is totaly fine as explained in this awesome answer.

PS: I do also agree with the courses that Prashant recommend btw.

Last thing, when you do write @click="deleteRoom()", prefer writting @click="deleteRoom" because deleteRoom() is basically saying "set the callback and run it directly rather than waiting for the callback only".

Upvotes: 1

vovchisko
vovchisko

Reputation: 2239

No. Each component will be compiled only once. The number of methods inside a child component has nearly no impact on performance or the bundle size. Your example is fairly tiny.

Computed might affect performance, but it's very depending on your data structure and update frequency.

If you're talking about a "very" long loop (1000-3000+ components in the list) you can try this:

Virtual Scroll List

Example with infinite scroll

Twitter does it, for example. It allows you to render very long lists with relatively heavy components and with a minimal performance impact.

Upvotes: 1

Related Questions