computed : 计算属性
重点是得到一个数据
<template>
<div>{{name}}</div>
<!--使用时不需要加括号-->
</template>
<script>
export default{
data() {
return {
firstName: '小花',
lastName: "王"
}
},
computed: {
name() {
return this.firstName + '' + this.lastName
}
}
}
</script>
使用时不需要加括号
它会将计算的结果自动缓存
只有在依赖属性改变后才会执行
watch : 监听
重点是调用一个函数
<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对象进行了监听,在加分超过最高分的时候批评贪心的同学
可以看到监听有两个参数:
- immediate:是否在第一次渲染的时候执行函数
- deep:是否要监听对象里面属性的变化
当相关数据变化了就执行回调函数
在这个例子里就是,当test对象或者test对象里的属性变化时就会执行handler
