04.Vue计算属性和监听器

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当我在数学成绩或英语成绩后面多填一个零时，总分也会多一个零。就成了字符串拼接

效果图