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