What is the best way to create a new object in a Vue component with optimal efficiency?

Question

What is the best way to create a new object in a Vue component with optimal efficiency?

Currently, I am working on initializing a map that would be utilized in my calculatePrice function.


calculatePrice(key) {

    let prices = new Map({
        0: 17,
        1: 19,
        2: 24,
        3: 27,
        4: 30,
        5: 46,
        6: 50,
        7: 54,
        8: 58,
        9: 67,
        10: 75,
    });

    let price = prices.get(key);
    return price;
},

However, considering the frequent invocation of this method (using @change within a form field), it might not be efficient for performance to create this object every time the method is called. Is there a better location within a view component to store "prices" where it can be initialized when the page loads and accessed whenever the method is invoked without requiring recreation?

javascript dictionary vue.js

Answer 1

Answer №1

This appears to be a universal constant specific to your component. Consider defining it outside of the component, while keeping it within the same scope (or importing it from elsewhere).

Answer 2

This appears to be a universal constant specific to your component. Consider defining it outside of the component, while keeping it within the same scope (or importing it from elsewhere).

Answer 3

Answer №2

Include it as part of the data object:

export default {
    name: 'ComponentName',
    data() {
        return {
            prices: {
                0: 17,
                1: 19,
                2: 24,
                3: 27,
                4: 30,
                5: 46,
                6: 50,
                7: 54,
                8: 58,
                9: 67,
                10: 75,
            }
        }
    },
    methods: {
        getPrice(key) {
            return this.prices[key];
        }
    }
}

Answer 4

Include it as part of the data object:

export default {
    name: 'ComponentName',
    data() {
        return {
            prices: {
                0: 17,
                1: 19,
                2: 24,
                3: 27,
                4: 30,
                5: 46,
                6: 50,
                7: 54,
                8: 58,
                9: 67,
                10: 75,
            }
        }
    },
    methods: {
        getPrice(key) {
            return this.prices[key];
        }
    }
}

What is the best way to create a new object in a Vue component with optimal efficiency?

Answer №1

Answer №2

Similar questions

Increase and decrease buttons using the 'keydown' event (ArrowUp and ArrowDown)

I am looking to retrieve a specific input value from a JSON array using JavaScript

Generate HTML content using AngularJS

What steps should I take to make sure the vuex store is included in my build process?

A step-by-step guide on recovering information from a JSON file within Angular 12

Having trouble simulating a service using nuxt and jest

The input type "number" does not seem to be compatible with the currency pipe feature

What other options are available for achieving the same functionality as FormData.delete() given its low level of support?

Tips for dynamically inserting JSON data into HTML elements

A guide on integrating a stacked bar chart from ApexCharts into a modal or v-dialog component

How can I prevent buttons from being created using ngFor in Angular?

Content that moves with a flick of a finger

Encountering an issue with Material-UI and Next.js: "TypeError: theme.spacing is not a function

My bootstrap collapse navbar isn't functioning properly. Despite pressing the icon on a smaller screen, the menu fails to open. Can anyone provide a solution to this issue?

Is it problematic to assign computed values to a ref property within Vue?

Problem with repetitive looping of Jquery click event within an Angular controller

Having trouble with deploying Node.js to Heroku? Feel like your 'git push her

Is it possible to display a pdf.js page as actual HTML elements rather than as canvas or SVG?

Guide on organizing users into groups and filtering them using Firestore's reference field type

Enhance global variable by appending a line from a local function in Javascript