1, Calculated attribute
1. The calculation attribute is to make the expression in the template concise and easy to maintain, which conforms to the original design intention for simple operation.
For example:
<div id="app"> {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }} </div>
The operation is too complex, lengthy and difficult to maintain, so we should use the way of calculating attribute to write the complex operation.
Therefore, it can be rewritten as follows:
<body> <div id="app"> {{ changewords }} // Render without writing () </div> </body> <script> var vm = new Vue({ el: "#app", data:{}, // Calculated attribute computed:{ changewords(){ return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1) } } }) </script>
Conclusion:
1. Variables are not defined in data, but in computed. The writing method is the same as the writing method, with return value. The function name is rendered directly in the page template without parentheses.
2. Update the result according to the change of the incoming variable.
3. The calculation attribute is cached based on the responsive dependency. If any one of the values has not changed, it calls the data of the last calculation cache, so it improves the performance of the program. In methods, each call will be recalculated. In order to consume unnecessary resources, we choose to use calculation attributes.
Example of fuzzy query of calculation attribute:
<body> <div id="app"> <input type="text" v-model="mytext"> <ul> <li v-for="data in datalistcom" :key="data"> {{ data }} </li> </ul> </div> </body> <script> var vm = new Vue({ el: "#app", data:{ datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"], mytext:'' }, computed:{ datalistcom(){ return this.datalist.filter(item=>item.indexOf(this.mytext)>-1) } } }) </script>
2, Monitor attribute (watch)
As mentioned above, when calculating the attribute, it can be monitored and calculated during initialization, but the watch will be triggered only when it changes.
You can use watch when you have some data that needs to change with other data, or when you need to perform asynchronous or expensive operations when data changes.
Example:
<body> <div id="app"> <p>Unit Price:<input type="text" v-model="price"></p> <p>Number:<input type="text" v-model="number"></p> <p>Calculated amount:{}</p> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ price:100, number:1, sum:0 }, //It is triggered when a value or state changes watch watch:{ // The names of the monitored parameters should be the same price(){ console.log(this.price) if(this.price*this.number < 1000 && this.price*this.number > 0){ this.sum = this.price*this.number + 100 }else{ this.sum = this.price*this.number } }, number(){ console.log(this.price) if(this.price*this.number < 1000 && this.price*this.number > 0){ this.sum = this.price*this.number + 100 }else{ this.sum = this.price*this.number } } } }) </script>
The difference between calculation property and property listening:
1. The calculated attribute variable is defined in computed, and the attribute listening is defined in data.
2. The calculation attribute is a declarative description of a value that depends on other values. After the dependent values change, recalculate the result and update the DOM. Property listens for defined variables. When the defined value changes, the corresponding function is executed.