Let's leave the cumbersome recalculations to computed properties!
computed properties
A computed property is a property that is dynamically calculated from data. Computed properties are data dependent and update automatically when the data changes. This improves application performance by keeping up with data changes and updating as needed.
Also, if you write functions just to calculate data, the code will become bloated and readability will be poor.
Computed properties eliminate the need to write variables directly in the template to display the results of complex calculations and operations.
When not to use computed properties
<html>
<head>
<title>No computed properties</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>Total Price: {{ calculateTotalPrice() }} Yen</p>
<input type="text" v-model="price" />
<input type="text" v-model="amount" />
<button @click="addProduct">Add Product</button>
</div>
</body>
</html>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
price: 0,
amount: 0,
products: \[
{ price: 100, amount: 2 },
{ price: 200, amount: 3 },
{ price: 300, amount: 1 },
\],
};
},
methods: {
addProduct() {
let newProduct = {
price: Number(this.price),
amount: Number(this.amount),
};
this.products.push(newProduct);
},
calculateTotalPrice() {
let total = 0;
this.products.forEach((product) => {
total = total + product.price \* product.amount;
});
return total;
},
},
}).mount("#app");
</script>
I tried to describe it in a way that uses a function without using a calculated property.
<p>Total Price: {{ calculateTotalPrice() }} Yen</p>
This statement computes and prints the products array. Even with this, it works without any discomfort, but using functions just for calculations makes the code unsightly. It’s a little confusing because it’s not intuitive.
When to use computed properties
<html>
<head>
<title>Computed Properties</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>Total price: {{ totalPrice }} JPY</p>
<input type="text" v-model="price" />
<input type="text" v-model="amount" />
<button @click="addProduct">Add Product</button>
</div>
</body>
</html>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
price: 0,
amount: 0,
products: [
{ price: 100, amount: 2 },
{ price: 200, amount: 3 },
{ price: 300, amount: 1 },
],
};
},
methods: {
addProduct() {
let newProduct = {
price: Number(this.price),
amount: Number(this.amount),
};
this.products.push(newProduct);
},
},
computed: {
totalPrice() {
let total = 0;
this.products.forEach((product) => {
total += product.price \* product.amount;
});
return total;
},
},
}).mount("#app");
</script>
I tried to describe it using a calculated property.
computed: {
totalPrice() {
let total = 0;
this.products.forEach((product) => {
total += product.price \* product.amount;
});
return total;
},
},
A calculation is performed to calculate the total amount based on the price property and amount property of the product object.
By using computed properties, you no longer need to include formulas or function names in your HTML code,
In this example, just write totalPrice in the HTML code and it will be calculated automatically when there is a change in products.
at the end
Computed properties make your code shorter and easier to understand.
The code created this time is on GitHub below, so if you are interested, please actually run it and check it. If you have any questions, please leave a comment.
https://github.com/asakura-sakura/wiblok