Vue 学习记录2 - 计算属性

1. 基本用法

有时候我们可能需要在{{}}里添加一些需要计算再展示出来数据
例如：在页面中展示学生的成绩总分和平均分：

<div id="app">
    <table border="1">
        <thead>
            <th>学科</th>
            <th>分数</th>
        </thead>
        <tbody>
            <tr>
                <td>数学</td>
                <td><input type="text" v-model="Math"></td>
            </tr>
            <tr>
                <td>英语</td>
                <td><input type="text" v-model="English"></td>
            </tr>
            <tr>
                <td>化学</td>
                <td><input type="text" v-model="chemistry"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td>{{Math + English + chemistry}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{(Math + English + chemistry)/3}}</td>
            </tr>
        </tbody>
    </table>
</div>

new Vue({
    el:'#app',
    data:{
        Math:88,
        English:77,
        chemistry:99,
    }
})

以上是通过在{{}}里运算，得出总分和平均分
虽然也能解决问题，但是特别不清晰，特别是当运算比较复杂的时候
那怎么办呢？
了解一点的，应该会想到methods，
没错，确实methods也可以！但事实上，vue给我们提供了一个更好的解决方案叫计算属性
计算属性是vue实例中的一个配置选项：computed
通常里面都是一个个计算相关的函数，函数里头可以写大量的逻辑，最后返回计算出来的值
即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。

<div class="app">
    <table border="1">
        <thead>
            <th>学科</th>
            <th>成绩</th>
        </thead>
        <tbody>
            <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="chemistry"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{average}}</td>
            </tr>

        </tbody>
    </table>
</div>

ar vm = new Vue({
    el:'.app',
    data:{
        Math:88,
        English: 77,
        chemistry:99,
    },
    computed:{
        sum:function(){
            return this.Math+ this.English+this.chemistry;
        },
        average:function(){
            return Math.round(this.sum/3);
        }
    }
});

如上，
计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。而如果写在methods里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么这里我们没用methods的原因
 

2. Get、Set函数

get和set都是回调函数

const vm = new Vue ({
	data: {
		firstName; ‘A’，
		lastName: 'B'
	},
	computed: {
		fullName: {
			// 1.当需要读取当前属性值时调用(初始化)/当依赖项变化时也调用该回调函数  
            // 2.根据相关数据计算并返回当前属性值
			get () {
				return firstName + ' ' + lastName;
			},

			//  1.监视：当属性值变化时调用该回调函数        
            //  2.根据最新的属性值计算相关数据
			set (value) {   //fullName是要监听的属性，value是fullName的最新属性值
				this.firstName = value.split(' ').[0];
				this.lastName = value.split(' ').[1];
			}
		}
	}

Html

姓：<input type="text" v-model="firstName" />
名：<input type="text" v-model="lastName" />
姓名：<input type="text" v-model="fullName" />   

转自:  Vue的计算属性 - 简书 (jianshu.com)

           vue computed计算属性的get和set函数_zhaohanqq的博客-CSDN博客