preface

In the front-end development process, it is very necessary to update the data of view rendering in real time, especially when it involves some data that needs to be reloaded or rendered, which involves the real-time data refresh of forms. Therefore, it is an important skill for data operations such as real-time data refresh in the development process, Especially for new front-end developers, it is particularly important, so we must master relevant skills. This blog post will share one of the knowledge points used in dealing with some complex logic: computing attributes, then the calculated keyword of computing attributes is used.

Use of calculated properties

1, Key words

Calculation attribute keyword: calculated.

2, Usage

Computational properties are useful when dealing with some complex logic.

3, Precautions

(1) Calculate the attributes, and re render them every time the function value changes;

(2) The calculation attribute can be used as an initialization set function for Vue instances, and can provide an interface to assign values to data in Vue instances;

(3) Calculate the attribute. Even if the object is not within the scope of the component, the method of calculating the attribute will also be issued when the object changes an attribute externally.

4, The difference between calculated and methods

In the Vue instance, the difference between computed and methods is:

1. Computed: Based on the dependency cache, when the calculation method in computed is called multiple times, the result will be cached after the first calculation. As long as the instance of the definition to which the computed attribute belongs does not change, the second calculation will not be performed, but the first calculation result will be called directly for page rendering.

2. Methods: when calling multiple times, the results of each call are calculated by calling the calculation method in methods again.

In principle, methods can be used instead of computed. The effect is the same for both. However, computed is based on its dependency cache. It will be retrieved only when the related dependencies change; However, using methods, when re rendering, the function will always be called and executed again.

Note: it can be said that the performance will be better using computed, but if you don't want caching, you can use the methods attribute for calculation.

5, Use example

According to the different requirements in the actual development process, summarize the common processing methods in the actual combat. The requirements can not be completed, and it is impossible to cover them all. Here, only some common operations are shared for the convenience of developers in need. Specific examples are as follows.

1. Handle the inversion string operation of the string by using the calculation attribute

<div id="demo">
  <span>String initial value: {{ title }}</span>
  <span>Invert the value of the string after calculation: {{ reversedTitle }}</span>
</div>
 <script>
var vm = new Vue({
  el: '#app',
  data: {
    title: 'Apple'
  },
  computed: {
    // getter of calculated property
    reversedTitle: function () {
          return this.title.split('').reverse().join('');    // 'this' points to the vm instance
    }
  }
})
</script>

Final results:

String initial value: Apple

Invert the value of the string after calculation: elppA

2. Whether to click or not is handled by using the calculation attribute

computed:{
        noChecked:function(){
            return this.array.filter(function(e){
                return !e.isChecked
            }).length
        }
    },       // e. Ischecked is the value value of input{type = "checkbox"}. When you click Check or uncheck on the page, the value of e.isChecked will change, that is, if the attribute is changed externally, the method of calculating the attribute will also be issued.

3. Determine the filter criteria by using the calculation attribute

computed: {
    isComplete() { //Judge whether the following conditions are met
      return (
        (this.tabActive == "1" && this.currentNode == "Confirm resources") || (this.tabActive == "1" && this.currentNode == "end")
      );
    },
   }

4. Use of methods with parameters in calculation attributes

  <template >
            <van-collapse  v-model="collapseItems"  v-for="(item, idx) in this.projectResourceGroups"  :key="idx">
          <van-collapse-item class="projectResourceMap-item" :name="item.id">
            <template #value>
              <div> {{ "Current group total" + arrayAdd(item.projectResourceMap) + " Role rows" }} </div>
            </template>
          </van-collapse-item>
        </van-collapse>
    </template>
computed: {
    arrayAdd() { //Returns the length of the array according to the data source
      return function (index) { 
        if (index) {
          return index.length;
        }
      };
    },
  },

6, Finally

The above content is about Vue The use of computed in Vue.js is also summarized in Vue JS. The system comprehensively introduces the use of calculation attributes, which is convenient for developers to consult and use. Other contents will not be repeated.