Vue calculation properties in detail
This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021
What are computed attributes
A compute property, as the name suggests, is first an attribute and second a “function” of computation
It’s official: a calculated property is a property that changes automatically when the value of its dependent property changes, and the associated PART of the DOM is updated synchronously.
Calculate the use of attributes
Add our computed properties to the computed configuration item, and write our logic code in the properties.
Example: We use input to add elements to an array, and use the evaluated property to calculate the array’s sum.
Note: Calculated properties are properties, and are used on a page only with the value of the property, not with (), otherwise it becomes a method.
code
<template>
<div id="main">
<div class="one">
<el-input v-model="number" placeholder="Enter a number"></el-input>
<el-button type="primary" circle @click="add">+</el-button>
</div>
<p>The array is: {{list}}</p>
<p>The sum of the array is {{sum}}</p>
</div>
</template>
<script>
export default {
data() {
return {
list: [].number:0}; },methods: {add(){
this.list.push(this.number)
}
},
computed: {
sum: function () {
// 'this' points to the VM instance
var ans = 0;
this.list.forEach((item, index) = > {
ans +=parseInt(item);
});
return ans
},
},
};
</script>
Copy the code
Getters and setters to know
A calculated property contains a getter and a setter. The calculated property uses the getter function by default. If you want to use the setter function, you have to write out the setter function manually
In setter functions, we can manipulate the data that we use in getters, so dependent variables affect independent variables.
When we assign a value to this property, Vue parses the set method and passes in the value so that newValue receives it
Example: Simply assign this property to the console and the page changes
Code:
<template>
<div id="main">
<div class="one">
<p>{{ firstName }}</p>
<p>{{ lastName }}</p>
</div>
<p>{{fullName}}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "Zhang".lastName: "Bill"}; },mounted() {
window.vue = this;
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + "Like" + this.lastName;
},
// setter
set: function (newValue) {
var names = newValue.split("");
this.firstName = names[0];
this.lastName = names[names.length - 1]; }},}};</script>
Copy the code
Evaluate the benefits of attributes
Knowing so much, it is found that the calculation of the calculated property can be realized through methods, so why do we need to use the calculated property?
😉 Here comes the advantage
Computed properties are cached based on reactive dependencies, and they are reevaluated only when the associated reactive dependencies change (associated property changes). Improved performance
Write in the last
Welcome to read, if there is any mistake, please comment pointed out, very grateful.
💌 want to be a person who only remembers happiness and knowledge. I hope you are also 💌
A romantic universe, but also cherish the world’s daily code farmers