computed

计算属性。

作用：监听数据变化，生成新值（该值不需要在data中定义）。

特性：依赖缓存进行计算，也就是说只有数据发生改变时，才会计算，若数据没有变化，则会直接取出缓存的值。

直接看栗子

场景：根据英语、语文分数，算出总分。

// html部分
<div>
    <div>
        语文：<input v-model="chineseScore"/>
    </div>
      <div>
        英语：<input v-model="englishScore"/>
    </div>
    <div>
        {{totalScore}}
    </div>
</div>

// js部分
data(){
    chineseScore:0,
    englishScore:0    
},
computed:{
    totalScore(){
        return this.chineseScore + this.englishScore
    }
}

其中，

chineseScore、englishScore都是在data中定义的，而总分totalScore是不需要定义的，在html中用的时候，直接当做data中的数据用，而不是方法哦~

错误用法：totalScore()

传递参数

场景：在某些场景中，我们需要向计算的属性中传递参数。

方法：

// html部分
// 向computed中传递一个字符串
<div>
    <div>
        语文：<input v-model="chineseScore"/>
    </div>
      <div>
        英语：<input v-model="englishScore"/>
    </div>
    <div>
        {{totalScore('我的总分：')}}
    </div>
</div>

// js部分
data(){
    chineseScore:0,
    englishScore:0    
},
computed:{
    totalScore(){
        return function(val){
            return val + this.chineseScore + this.englishScore
        }
    }
}

其中，

在我们平时的return值外面，再包一层函数，参数为我们在html中传递的值。

这里我只是举了一个传值的例子，在实际的场景中当然不会这样。大多用在for循环中，把item作为参数传入进来，用于计算。