1.4 计算属性

• 计算属性的基本使用

对data中变量进行加工、组合、处理

计算属性不必在末位加括号( )

<div id="app">			
	<!-- 没有使用计算属性写法 -->
	<h2>{{firstName+' '+lastName}}</h2>
	<h2>{{firstName}} {{lastName}}</h2>
	<!-- 使用计算属性写法 -->
	<h2>{{fullName}}</h2>
</div>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		data:{
			firstName:'ni',
			lastName:'hao'
		},
		// 属性命名用名词
		computed:{
			fullName:function(){
				return this.firstName + ' ' + this.lastName
			}
		},
		//方法命名前边用动词
		methods:{
			getFullName:function(){
				return this.firstName + ' ' + this.lastName
			}
		}
			})
</script>

• 计算属性的复杂使用

<div id="app">		
	<h2>总价格 {{totalPrice}}</h2>
</div>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		data:{
			books:[
				{id:0,name:'a',price:20},
				{id:1,name:'b',price:30},
				{id:2,name:'c',price:40}
			]
		},
		computed:{
			totalPrice:function(){
				let total=0
				this.books.forEach((v,i)=>{
					total+=v.price
				})
				return total
			}
		}
	})
</script>

• 遍历数组的几种方法

1. forEach

按升序为每个元素执行一次提供的函数

除抛出异常，无法中止循环

格式：array.forEach(回调函数(当前元素(必填)、元素索引(可选)、数组(可选))=>{函数体})

2.for循环

for(索引变量 in 数组){数组[索引变量]}

for(当前元素 of 数组){当前元素}

3.reduce

为每个元素执行一次提供的回调函数。

array.reduc((累加器(必填),元素(必填),索引(可选),元素所属的数组(可选))=>{return 累加器+元素},累加器初始值(可选))

4.filter

为每个元素执行一次提供的回调函数，回调函数根据返回逻辑值，确定元素是否加入返回数组

函数执行完成返回数组

array.fitler(元素值=>{return 元素值>100})

5.map

对数组每个元素进行处理，处理的结果加入返回数组。

array.map(n=>{return n*2}）

• 计算属性的setter和getter

每个计算属性都包含1个setter（不常用）和1个getter

计算属性本质上就是1个属性，函数形式只是计算属性的简写形式

//计算属性的简写形式
computed:{
    fullName:function(){
        return this.firstName + ' ' + this.lastName
    }
}

计算属性完整的写法

computed:{
		fullName:{
			get:function(){
				return this.firstName + ' ' + this.lastName
			},
			//计算属性一般没有set方法，可省略
			set:function(e){
				//e为自定义变量名
				const names=e.split(' ')
				this.firstName=names[0]
				this.lastName=names[1]
			}
		}
}

• 计算属性的缓存

计算属性具有缓存机制，效率更高，如果多次使用只会调用一次。

• let及var引起的JS闭包

相当于定义了一个函数（JS中函数有块作用域），并立即调用执行

(function(i){
	console.log((i))
})('123456789')

• const的使用

优先使用const，cosnt 定义常量时必须赋值。常量的含义是指向的对象不能修改，但可以修改对象内部的属性。

• 对象字面量的增强写法

属性的增强写法

let name='王五'
stu:{
	name,	//等于同name:name
	age:23,
	class:'一班'
}

函数的增强写法

//ES5老写法
abc:function(){
						
},
//ES6增强写法
abc(){
						
}

---

watch观察数据变化

• watch的精简写法

//watch的精简写法
watch:{
	firstName(newValue){
		this.fullName=newValue+'-'+this.lastName
	}
}

• watch的完整写法

watch:{
		firstName:{
			immediate:true,
			handler(newValue,oldValue){
				this.fullName=newValue+'-'+this.lastName
			}
		}
}

        完整写法是写成对象的形式，immediate:true的意思是在初始化时就会调用一次。handler中的形参第1个是新值，第2个是旧值。

        配置watch的两种方法：1.new Vue时传入配置；2.vm.$watch('要监视的data属性名称',{immediate:true,handler(newValue,oldValue){this.fullName=newValue+'-'+this.lastName}} 第一个参数必须为字符串。

        计算属性与watch区别：watch可以执行异步操作