1. What is: do not save attribute values, need to obtain their own attribute values based on other attributes through complex calculation
  2. Why: Because the results of complex calculations that usually require results are not stored in the database, and the natural backend will not provide us with ready-made values for direct use, but we can only rely on the front end, using the value of other attributes to calculateSuch as:The total price of shopping cart: the calculation process is complex, and the value of frequent changes, usually not stored in the database, but completely rely on the dynamic calculation of customer service!
  3. When: Use computed properties whenever the desired value on the interface is not directly provided by the back end, but can be computed from other values
  4. How to: step 2
(1). Define a calculated attribute: New Vue({el:"#app", data:{}, methods:{event handler}, Computed :{calculate attribute names (){// Calculate attributes in the same way as attributes, but in essence it is a function // Transfer other attribute values to you based on data, and obtain a final attribute value after complex calculation}}}) (2). Use computed attributes in HTML: for example :< element >{{computed attribute name}}</ element > Note: computed attributes are functions in nature, but do not use (), as in dataCopy the code

5. Result: the runtime new Vue() will automatically calculate the result of the calculated property, replacing {{calculated property name}}.

(1). Usage: Functions in a.methods must be invoked with () when used in HTML b. Computed attributes in COMPUTED are used in HTML without () (2). Efficiency: When using this function repeatedly or calculating properties, the function in a.methods is repeated every time () is added! -- No need to calculate attribute results in b.computed. It is only computed once for the first use, and then cached by VUE from the second use.Copy the code

7. Summary: When to use functions? When to use computed properties?

(1). If more emphasis is placed on the value of the execution result of the function, the preferred calculation attribute (2). If you don't care about execution results and are more focused on performing an action (such as sending an Ajax request), use the functions in MehodsCopy the code

8. Example: Calculate shopping cart total price:

<body> <! -- Calculate the total cart price --><div id="app">
      <h3>Total price: selections {{total. ToFixed (2)}}</h3>
      <ul>
       <! - the subtotal -- -- >
       <li v-for="(p,i) of cart" :key="i">| {{I + 1}} {{p.p name}} | | {{p.p rice}} {{p.c mount}} | subtotal: selections {{(p.p rice * p.c mount). ToFixed (2)}}</li>
      </ul>
   </div>
   <script>
        var vm=new Vue({
           el:"#app".data: {cart:[
                 {pname:"Huawei".price:5588.count:2},
                 {pname:The word "apple".price:8888.count:1},
                 {pname:"Millet".price:3288.count:3}},methods:{
           },
           computed: {// Define the calculation property total to calculate the total price based on the contents of the data total CART array
                  total(){
                  console.log('calculated a total price');
                  var result=0;
                  for(var p of this.cart){
                       result+=p.price*p.count;
                  }
                  returnresult; }}})</script>
</body>
Copy the code