计算属性和监视属性

一、计算属性

1.1计算属性的使用

1.1.1 计算属性的基本使用

<div id="app">
	<h2>{{firstName}}-{{lastName}}</h2>
	<h2>{{getFullName()}}</h2>
	<h2>{{fullName}}</h2><!-- 计算属性在页面渲染时 不需要加() -->
</div>

<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
			return{
			    firstName:'张',
				lastName:'三'
			}
		},
		methods:{
			getFullName() {
				return this.firstName + '-' + this.lastName
			}
		},
		computed:{//计算属性  getter setter
			fullName(){
				return this.firstName + '-' + this.lastName
			}
		}
    })
</script>

1.1.2 计算属性的复杂使用  遍历数组对象 ：for循环  for in    for of     forEach  map  filter   reduce 

<div id="app">
	<h2>总价为：{{totalPrice}}</h2>
</div>

<script type="text/javascript">
	new Vue({
	el:'#app',
	data(){
		return{
			books:[
				{id:110,name:"JavaScript从入门到入土",price:119},
				{id:111,name:"Java从入门到放弃",price:80},
				{id:112,name:"编码艺术",price:99},
				{id:113,name:"代码大全",price:150},
			]
		}
	},
	computed:{//计算属性
	// 1.  for循环
		// totalPrice(){
		// 	let total=0;
		// 	for (let i=0;i<this.books.length;i++){
		// 		total += this.books[i].price;
		// 	}
		// 	return total
		// }
    					
    // 2. for in
	    // totalPrice(){
		// 	let total=0;
		// 	for (let i in this.books){
		// 		total += this.books[i].price;
		// 	}
		// 	return total
		// }
					
	// 3. for of
		// totalPrice(){
		// 	let total=0;
		// 	for (let item of this.books){
		// 		total += item.price;
		// 	}
		// 	return total
		// }
					
	// 4. forEach
		// totalPrice(){
		// 	let total=0;
		// 	this.books.forEach(item=>{
		// 		total += item.price;
		// 	})
		// 	return total
		// }
					
	// 5. map
		// map
		// totalPrice(){
		// 	let total=0;
		// 	this.books.map(item=>{
		// 		total += item.price;
		// 	})
		// 	return total
		// }
					
	// 6. filter
		// totalPrice(){
		// 	let total=0;
		// 	this.books.filter(item=>{
		// 		total += item.price;
		// 	})
		// 	return total
		// }
					
	// 7. reduce
		totalPrice() {
			// return this.books.reduce((total, item) => {
			// 	return total + item.price
			// }, 0)
			return this.books.reduce((total, item) =>total + item.price, 0)
		}
	}
})
</script>

1.2计算属性的setter和getter

<div id="app">
	<h2>总价为：{{totalPrice}}</h2>
</div>

<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
			return{
			    firstName:'张',
				lastName:'三'
			}
		},
		computed:{//计算属性
			fullName:{
			    //计算属性一般没有set方法，只读属性
				set:function(newValue){
					const names = newValue.split(" ")
					this.firstName = names[0]
					this.lastName = names[1]
				},
				get:function(){
					return this.firstName + " " + this.lastName
				}
			}
		}
    })
</script>

1.3计算属性的和methods的对比

1.计算属性是一个属性 必须要有返回值 methods不一定
2.计算属性在页面渲染时 不需要加括号 methods必须要加
3.计算属性有缓存 methods没有缓存 从性能上来讲 计算属性更具有优势

二、监听属性

1.1监听简单数据类型、函数

<div id="app">
	--监听器--
	<h2>{{firstName}}-{{lastName}}</h2>
	<h2>{{watchFullName}}</h2>		
	--计算属性--
	<h2>{{fullName}}</h2>
	<h2>{{fullName}}</h2>
	<h2>{{fullName}}</h2>
	--方法--
	<h2>{{getFullName()}}</h2>
	<h2>{{getFullName()}}</h2>
	<h2>{{getFullName()}}</h2>		
	--年龄--
	<h2>{{age}}</h2>
</div>

<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
			return{
				firstName:'张',
				lastName:'三',
				watchFullName:'张三',
				age: 30
			}
		},
		methods:{
			getFullName(){
				console.log("调用了getFullName");
				return this.firstName + " " + this.lastName
			},
			change(){
				return this.watchFullName = '1111'
			}
					
		},
		computed:{//计算属性
			fullName(){
			    console.log("调用了计算属性fullName");
					return this.firstName + " " + this.lastName
				}
			},
			watch: { //万物皆可监听
				/* firstName(newval, oldval) {
					console.log(newval);
					console.log(oldval);
					this.watchFullName = this.firstName + this.lastName
				} */
			    firstName:{
					handler:function(newval, oldval){
					    console.log(newval);
						console.log(oldval);
					},
					immediate:true//立即监听
				},
				watchFullName:'change'
			} 
		})
	// vm.$watch('firstName',(newval, oldval)=>{
	// 	console.log(newval);
	// 	console.log(oldval);
	// })
</script>

1. watch的使用 通过watch我们可以获取改变的值 从而去改变一些东西
2. 如果改变和方法以及计算属性没有关系的比如age 只要age发生变化 methods也会重新执行
3. 如果改变实例外的对象计算属性以及方法还有侦听器都不会发生变化.但是如果重新编译计算属性以及方法还有侦听器的某个值 实例外的对象也会跟着发生变化. 
4.扩展: watch的完全体

1.2监听复杂数据类型

watch无法直接监听复杂数据类型  用deep

<div id="app">
    <div>
		FullName: {{person.fullname}}
	</div>
    <div>
        Firstname:<input type="text"  v-model="person.firstname"/>
    </div>
</div>

<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
			return{
			   person: {
					firstname: 'Menghui',
					lastname: 'Jin',
					fullname:''
			    }
			}
		},
		watch:{
			person:{
				handler:function(n,o){
					console.log(n);
					console.log(o);
					this.person.fullname = n.firstname + this.person.lastname 
				},
			immediate:true,//立即监听
			deep:true
			}
		}
    })
</script>

1.3解决watch监听复杂数据类型中新值和老值相同问题

computed: {
	person2() {
		return JSON.parse(JSON.stringify(this.person));
    } //解决深度监听新老值同源问题
}

1.3计算属性computed和监听属性watch得区别

1.computed能完成的功能,watch都可以完成。

2.watch能完成的功能,computed不一定能完成，例如: watch可以进行异步操作。

tips:

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vue实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等)，最好写成箭头函数,这样this的指向才是vue实例对象