1.computed计算属性
1，计算属性类似于methods选项中的定义函数
2，计算属性会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
? ? ? 函数 每次都会执行函数体进行计算。
实例：接下来我们来实现输入数学与英语分数，采用methods与computed分别计算出总分
1.在data中创建数学分数和英语分数? ? ? ? ?
data:{mathscore:80,english:90}2.然后我们双下个绑定数学和英语的成绩
数学 <input type="text" v-model="mathscore"> <br>
英语 <input type="text" v-model="englishscore"> <br>3.然后我们再测试一下总分，这个总分是函数的，我们用v-moudle绑定一个函数，这个函数是将数学和英语成绩相加，我们先看一下div中总得分的代码
总分（函数）<input type="text" v-model="zongscore()"> <br>?我们把这个函数名叫做zongscore（）注意一定要加小括号
这个zongscore函数应写在methods中
methods:{?zongscore(){return (this.mathscore-0) + (this.englishscore-0)}为什么mathscore和englishscore后面要加-0呢？ 是为了激活其计算属性，若不写-0当我在数学成绩或英语成绩后面多填一个零时，总分也会多一个零。就成了字符串拼接
效果图
?4.然后我们再来测试一下计算属性的总得分，这个总分是计算属性的，我们也是用v-model绑定一个函数zongscore1，注意这个时候后面就没有小括号了，因为他是属性。
总分（计算属性）<input type="text" v-model="zongscore1"> ?<br>这个zongscore1函数应写在computed中，他跟zongscore在methods中写的是一样的
zongscore1(){?return (this.mathscore-0) + (this.englishscore-0)},5.我们给这个Vue起个名字?
?var vm = new Vue在methods中console.log一下? ? ?在computed中console.log一下?
?
methods:{
zongscore(){
console.log("函数被调用");
return (this.mathscore-0) + (this.englishscore-0)
},
},
computed:{
zongscore1(){
console.log("计算属性被调用了");
return (this.mathscore-0) + (this.englishscore-0)
},
?这样的目的是什么？
有便于观察当成绩发生变化时，两个函数分别被调用了几次
初始状态图
我们将数学成绩加一个0，来观察函数各输出几次
?
打开控制界面可看出函数被调用2次（数学和英语各调用一次），
而计算属性只调用一次这是为什么呢?
是因为计算属性有缓存英语成绩就被缓存下来了，其实数学成绩也被缓存下来了但因为我改变了数学成绩。所以就调用了数学成绩一次
效果图
?
6.我们在控制面板分别输入 vm.zongscore()和vm.zongscore1，可以看出函数被调用了，而计算属性没被调用直接输出了890? 这更充分说明了计算属性有缓存
状态图
?7.还有一个问题就是我在得分(函数)的输入框中加入一个零,它会直接报错,我们在计算属性的输入框里再加一个零也会报错.可他俩的报错不同 如下图
?可以看出计算属性computed默认属性带有get方法没有set方法
8.这里我们再给计算属性写一个双向的,再创建一个叫zongscore2的函数
总分（计算属性-双向）<input type="text" v-model="zongscore2"> ?然后把zongscore2也写在computed中,这里注意他和zongscore1不同,1是函数而zongscore2是对象所以是zongscore2:{}
案例源码
zongscore2:{
get(){
return (this.mathscore-0) + (this.englishscore-0)
},
set(newvalue){
var avg = newvalue/2
this.mathscore=avg
this.englishscore=avg
}
},2.watch监听器
我们接着上面的案例写(要求:如果数学分数发生改变时,zongscore3则做出相应变化)
1.在div中写入总得分监听器
总分（计算属性-监听器）<input type="text" v-model="zongscore3"> 2.监听器watch和methods,computed是同一级别的
watch:{
mathscore:function(newvalue,oldvalue){
this.zongscore3=(newvalue-0)+(this.englishscore-0)
}
}总案例源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="../node_modules/vue/dist/vue.js"></script>
<body>
<div id="js">
数学 <input type="text" v-model="mathscore"> <br>
英语 <input type="text" v-model="englishscore"> <br>
总分（函数）<input type="text" v-model="zongscore()"> <br>
总分（计算属性-单向）<input type="text" v-model="zongscore1"> <br>
总分（计算属性-双向）<input type="text" v-model="zongscore2"> <br>
总分（计算属性-监听器）<input type="text" v-model="zongscore3">
</div>
</body>
<script>
var vm = new Vue ({
el:'#js',
data:{
mathscore:80,
englishscore:90,
zongscore3:0
},
methods:{
zongscore(){
console.log("函数被调用");
return (this.mathscore-0) + (this.englishscore-0)
},
},
computed:{
zongscore1(){
console.log("计算属性被调用了");
return (this.mathscore-0) + (this.englishscore-0)
},
zongscore2:{
get(){
return (this.mathscore-0) + (this.englishscore-0)
},
set(newvalue){
var avg = newvalue/2
this.mathscore=avg
this.englishscore=avg
}
},
},
watch:{
mathscore:function(newvalue,oldvalue){
this.zongscore3=(newvalue-0)+(this.englishscore-0)
}
}
})
</script>
</html>