Vue 计算属性computed的用法

计算属性computed

计算属性（computed）是Vue中的一个重要概念，它是一个计算值的函数，可以根据其他属性的值计算出一个新的值。计算属性可以被当做是一个响应式的属性，当其依赖的属性发生变化时，计算属性的值也会自动更新。这使得我们可以在模板中轻松地使用计算属性的值，而不必手动计算。
在Vue组件中，我们可以使用computed选项来定义计算属性。
data是Vue实例中一个配置项。用来存储vue实例或者组件里面的数值。Vue中的data选项 既可以声明变量、常量，也可以自定义函数。

<template>
  <div>
    <table>
      <caption>统计表</caption>
      <th>学科</th>
      <th>分数</th>
      <tr>
        <td>数学</td>
        <td><input type="text" v-model.number="math"></td>
      </tr>
      <tr>
        <td>英语</td>
        <td><input type="text" v-model.number="english"></td>
      </tr>
      <tr>
        <td>物理</td>
        <td><input type="text" v-model.number="pyhsics"></td>
      </tr>
      <tr>
        <td>总分</td>
        <!-- <td>{{ math+english+pyhsics}}</td> -->
        <td>{{ sum }}</td>
      </tr>
      <tr>
        <td>平均分</td>
        <!-- <td>{{ Math.round((math+english+pyhsics) / 3) }}</td> -->
        <td>{{ avg }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
	export default{
	  name:'App',
	  data(){
	    return{
	      math:null,
	      english:null,
	      pyhsics:null,
	    } 
	  },
        computed:{
		    sum(){	//定义一个名为 sum 的计算属性,由 math+english+pyhsics 三个数据属性计算而来
		      return this.math+this.english+this.pyhsics
		    },
		    avg(){   
		      return Math.round((this.math+this.english+this.pyhsics) / 3)
		    }
  		}
  	}  	 
</script>

在上面的例子中，我们定义了一个计算属性，它由math、english、physcis三个数据属性计算而来。
需要注意的是，计算属性是基于它的依赖缓存的。只要依赖的属性没有发生变化，计算属性的值就会被缓存起来，下次访问计算属性时就会直接返回缓存的值，而不必重新计算。这也就意味着，只要依赖的属性没有发生变化，计算属性的计算过程就不会被执行。（上述代码<input…/>片段中，由于表单table与Vue实例中的属性math、english、physcis是双向绑定的，表单的值发生改变，实例的属性值也会同步改变。）

Vue实例 引用方法 'this.'
当你在Vue实例中定义了数据属性、计算属性、方法等，可以使用this关键字来引用这些属性和方法。例如，如果你定义了一个数据属性message，你可以在Vue实例中的任何方法中使用this.message来访问它的值。同样，如果你定义了一个计算属性computedMessage，你也可以使用this.computedMessage来访问它的值。