计算属性 computed
作用：监听数据变化，生成新值（该值不需要在data中定义）。
特性：依赖缓存进行计算，也就是说只有数据发生改变时，才会计算，若数据没有变化，则会直接取出缓存的值。
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>computed</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <div> 语文：<input v-model="chineseScore" /> </div> <div> 英语：<input v-model="englishScore" /> </div> <div> 我的总分：{{totalScore}} </div> </div> </body> </html> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: "#app", data: { chineseScore: '', englishScore: '' }, computed: { // 计算属性的 getter totalScore: function() { // `this` 指向 vm 实例 return Number(this.chineseScore) + Number(this.englishScore); }, } }); </script>