uni-app学习(九)：computed

computed:

1.定义

是一个计算属性,类似于过滤器,对绑定到view的数据进行处理。

注：计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

2.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

如下代码，可以在computed方法进行判断更新name 的值

export default {
		name: '123',
		
		computed:{
			name(){
				if (name =='123'){
					return	name = '首页';
				}else{
					return	name = '123';
				}
			
			},
			
		},

<view>
		 {{name}}
		
	</view>

3.computed和methods的区别：

先来上个demo，计算面积。输入长和宽获取面积

<template>
	<view>
		<view class="inputView">
			长度:<input v-model="length" type="text"></input>
		</view>
		<view class="inputView">
			宽度:<input v-model="width" type="text"></input>
		</view>
		<view class="inputView">
			面积:<input v-model="areas" type="text"></input>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad(res) {
			uni.setNavigationBarTitle({
				title: res.title + '测试'
			})
		},
		data() {
			return {
				length: '',
				width: ''
			}
		},
		computed: {
			areas: function() {
				console.log('调用computed')
				return this.length * this.width
			}
		},

		methods: {

		}
	}
</script>

<style lang="scss">
	.inputView {
		display: flex;
		width: 100%;
		height: 80rpx;
		margin: 50rpx auto;
		line-height: 80rpx;

		input {
			margin: 15rpx 15rpx;
			width: 200rpx;
			height: 30rpx;
			border: 1rpx solid #333333;
		}
	}
</style>

此时，只要长度和宽度的数值任何一个改变，面积就会改变。也就是说使用computed会自动执行计算函数，计算出面积。

如果放在methods，则需要一个方法调用回去到面积。methods的方法就不贴了，太简单了。

使用computed时发现如果数值没有发生改变，就不会调用。

所以总结如下：

• computed直接以对象属性方式调用，不需要加括号，且有缓存的机制；
• methods调用时才会执行，没有缓存机制，调用几次会执行几次；
• computed是一个属性，里面包含get和set方法。