Question

我正在尝试实例化将在我的calculatePrice方法中使用的地图。

            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;
            },

但是，由于我会经常调用此方法（在表单字段中使用@change），因此每次调用该方法时保持该对象的性能似乎都不是最佳的。在视图组件中是否有更好的放置“价格”的地方？可以在页面加载时实例化它的某个位置，并在调用该方法时引用它而无需重新创建？

Answer 1

似乎它是组件的全局常量。在组件定义之外但在相同范围内创建（或从另一个文件导入）。

Answer 2

将其设为data属性的一部分：

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: {
        calculatePrice(key) {
            return this.prices[key];
        }
    }
}

如何有效地实例化Vue组件中的对象？

2 个答案: