计算属性

为什么要用计算属性

• 我们知道，在模板中，我们可以直接通过插值语法显示一些data中的数据，但是在某些情况下，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。
• 比如我们有firstName和lastName两个变量，而如果我们需要显示完整的名称，可能就需要写上{{firstName}}{{lastName}}，这种情况，如果我们使用计算属性，就可以只使用一个变量来显示一个完整的名称

计算属性的基本操作

<div id="app">
	<!-- <h2>{{firstName}}{{lastName}}</h2> -->
	<h2>{{fullName}}</h2>
</div>

<script type="text/javascript">
	const app = new Vue({
	el: '#app',
	data: {
		firstName: 'Kosfe',
		lastName: 'Ccnkf'
	},
	computed: {
		fullName() {
			return this.firstName + this.lastName
		}
	}
})
</script>

计算属性的进阶操作

// 使用计算属性计算出书的总价格
<div id="app">
   <h3>总价格：{{totalPrice}}</h3>

<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {        
            books:[
                {name:'三国演义', price:29},
                {name:'红楼梦', price:22}, 
                {name:'西游记', price:27}, 
            ]
        },
        computed: {
			totalPrice: function(){
                let result = 0;
                for (let book of this.books) {
                    result += book.price;
                }
                return result; 
            }
        }
    })
</script>

计算属性中的get和set方法

• 每一个计算属性都包含了一个get和set方法，只是大多数情况下被省略了，当我们通过计算属性返回值时，实际上就是调用了计算属性中的get方法，当我们修改计算属性时，实际上就是调用了计算属性中的set方法
• 然而，set方法基本上不用，get方法等效于直接返回值，因此，get和set基本上都省略了

<script type="text/javascript">
	const app = new Vue({
		computed: {
			fullName: {
				set: function(newValue) {
					console.log('-----', newValue);
					const names = newValue.split('b');
					this.firstName = names[0];
					this.lastName = names[1];
				},
				get: function() {
					return this.firstName + ' ' + this.lastName
				}
			}
		}
	})
</script>

计算属性与方法的异同点

• 计算属性与方法的功能有点像，不同的是，计算属性中不能传入参数，并且它是以一个属性的形式表现
• 其实，计算属性能够实现的功能，方法都能实现，而让计算属性不能被方法替代的优点是，它更节约性能，并且它会随着被调用次数的增大而无线扩大这个优点。当计算属性在被调用时，它会在内部做一次缓存，如果多次被调用，如果计算属性没变，它会直接返回缓存的结果，而方法在每次被调用时都会重新计算