computed : 計算屬性
重點是得到一個數據
<template>
<div>{{name}}</div>
<!--使用時不需要加括號-->
</template>
<script>
export default{
data() {
return {
firstName: '小花',
lastName: "王"
}
},
computed: {
name() {
return this.firstName + '' + this.lastName
}
}
}
</script>
使用時不需要加括號
它會將計算的結果自動緩存
只有在依賴屬性改變后才會執(zhí)行
watch : 監(jiān)聽
重點是調用一個函數
<template>
<div id="app">
<div>最高分是{{highest}}</div>
<span>作弊按鈕</span>
<button @click="add(index)" v-for="(course,index) in test" :key = "index">{{index}}加十分</button>
</div>
</template>
<script>
export default {
data() {
return {
test:{
語文: 80,
數學: 90,
英語: 100
}
}
},
computed: {
highest() {
const {test:{語文,數學,英語}} = this
return Math.max(語文,數學,英語)
}
},
watch:{
test:{
handler(){
const test = this.test
for(let i in test){
if(test[i] > 150){
alert(`${i}超過最高分啦,你太貪了`)
}
}
},
immediate: true,
deep: true
}
},
methods:{
add(index){
this.test[index]+=10
},
}
};
</script>
在上面的例子中,我對test對象進行了監(jiān)聽,在加分超過最高分的時候批評貪心的同學
可以看到監(jiān)聽有兩個參數:
- immediate:是否在第一次渲染的時候執(zhí)行函數
- deep:是否要監(jiān)聽對象里面屬性的變化
當相關數據變化了就執(zhí)行回調函數
在這個例子里就是,當test對象或者test對象里的屬性變化時就會執(zhí)行handler
