Home > Article > Web Front-end > The usage and difference between Computed and Watch in Vue
The usage and difference between Computed and Watch in Vue
- angryTomOriginal
- 2020-02-07 17:37:272095browse
This article introduces the difference between the computed attribute computed and the monitoring attribute watch in vue. I hope it will be helpful to students who are learning the vue front-end framework!
1. Computed attributes (computed)
1. Computed attributes are used to make expressions in templates concise and easy to maintain. It is in line with the original design intention for simple calculations.
For example:
<p id="app">
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</p>The operation is too complex, lengthy, and difficult to maintain, so we should use calculated attributes to write complex operations.
So it can be rewritten as:
<body>
<div id="app">
{{ changewords }} // 渲染 不用写()
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{},
// 计算属性
computed:{
changewords(){
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>Summary:
1. Variables are not defined in data, but defined in computed. The writing method is the same as the writing method, and there is a return value. . The function name is rendered directly in the page template without parentheses.
2. Update the results according to the changes in the passed variables.
3. Computed properties are cached based on responsive dependencies. If any of the values has not changed, it calls the cached data from the last calculation, thus improving the performance of the program. Methods will be recalculated every time they are called. In order to consume unnecessary resources, we choose to use calculated attributes.
Example of fuzzy query for calculated attributes:
<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. Monitoring attributes (watch)
When it comes to calculated attributes above, it is initialized It can be monitored and calculated but the watch will only be triggered when there is a change.
When you have some data that needs to change as other data changes, or when you need to perform asynchronous or expensive operations when the data changes, you can use watch.
Example:
<body>
<div id="app">
<p>单价：<input type="text" v-model="price"></p>
<p>数量：<input type="text" v-model="number"></p>
<p>计算金额：{{sum}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
price:100,
number:1,
sum:0
},
//监听某一个值或者状态发生变化 变化就会触发watch
watch:{
// 监听的参数的名字要一致
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 calculated properties and property monitoring:
1. Calculated property variables are defined in computed, and property monitoring is defined in data definition.
2. Computed attributes are declarative descriptions of a value that depends on other values. When the dependent value changes, the result is recalculated and the DOM is updated. Attributes listen to defined variables. When the defined value changes, the corresponding function is executed.
The above is the detailed content of The usage and difference between Computed and Watch in Vue. For more information, please follow other related articles on the PHP Chinese website!