vue的计算属性computed介绍 计算 getter setter 监听器watch

目录

1.计算属性的使用、复杂使用

简单使用

复杂使用

2.setter和getter以及v-model属性

 3.侦听器watch

 监听变量为对象

深拷贝监听事件

---

1.计算属性的使用、复杂使用

简单使用

        fullName是属性时，不加（），sumname()是方法时加（）

		<div id="app">
			<h2>{{firstname}}</h2>
			<h2>{{lastname}}</h2>
			<h2>属性中的{{fullName}}</h2>
			<h2>方法中{{sumname()}}</h2>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						firstname: 'zhang',
						lastname: 'san'
					}
				},
				//方法计算
				methods:{
					sumname(){
						console.log(11);
						return this.firstname+this.lastname
					}
				},
				//属性计算
				computed:{
					fullName(){
						console.log(22);
						return this.firstname+this.lastname
					}
				}
			})
		</script>

复杂使用

        这里计算了价格的总价，使用了for...i、for...in、for...of、forEach、map、filter、reduce、some方法计算

<div id="app">
			<h2>总价：{{totalpice}}</h2>
		</div>
		<script>
			const vm = 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: {
					// totalpice() {
					// 	let total = 0;
					// 	for (var i = 0; i < this.books.length; i++) {
					// 		total += this.books[i].price;
					// 	} 
					// 	return total
					// }
					
					// totalpice(){
					// 	let total = 0;
					// 	for (let i in this.books) {
					// 		total += this.books[i].price;
					// 	}
					// 	return total
					// }
					
					// totalpice(){
					// 	let total = 0;
					// 	for (let i of this.books) {
					// 		total += i.price
					// 	}
					// 	return total
					// }
					
					// totalpice(){
					// 	let total = 0;
					// 	this.books.forEach(i=>total+=i.price)
					// 	return total
					// }
					
					// totalpice(){
					// 	let total = 0;
					// 	this.books.map(item=>total+=item.price)
					// 	return total
					// }
					
					// totalpice(){
					// 	let total = 0;
					// 	this.books.filter(i=>total+=i.price)
					// 	return total
					// }
					
					// totalpice(){
					// 	return this.books.reduce((total,item)=>{
					// 		return total+item.price
					// 	},0)
					// }
					
					// totalpice(){
					// 	return this.books.reduce((total,item)=> total+item.price,0)
					// }
					
					totalpice(){
						let total=0;
						this.books.some(item=>{
							total+=item.price
							})
						return total
					}
				},
			})
		</script>

 

2.setter和getter以及v-model属性

        v-model用于双向绑定，即model（data()中的数据）可以输出到页面，也可以在页面更改数据传到model。一般用于input标签

        setter接受页面传回model中的值，getter使得数据从model传到view（页面）输出。

<div id="app">
			<input type="text" v-model='firstname'>
			<input type="text" v-model='lastname'>
			<input type="text" v-model='fullname'>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data(){
					return {
						firstname: 'zhang',
						lastname: 'san'
					}
				},
				computed: {
					fullname: {
						set: function(val){
							let list = val.split(',');
							this.firstname = list[0];
							this.lastname = list[1];
						},
						get: function(){
							return this.firstname+','+this.lastname
						}
					}
				},
			})
			
		</script>

         第三个input输入框值改变时相应的前两个输入框也会改变

 3.侦听器watch

        watch里面是监听事件，这里主要介绍显示新值和旧值

	<div id="app">
			<p>fullname：{{fullname}}</p>
			<p>firstname：<input type="text" v-model= 'firstname'/></p>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						firstname: 'zhang',
						lastname: 'san',
						fullname: 'zhangsan'
					}
				},
				watch: {
					 firstname(n,o){
						  console.log('新值：'+n);
						  console.log('旧值：'+o);
					 }
					 
		</script>

 监听变量为对象

        变量为对象时，不能直接使用监听事件，不会实现，但可以用handler()

        <div id="app">
			<!-- 不要忘记person. -->
			<p>fullname：{{person.fullname}}</p>
			<p>firstname：<input type="text" v-model='person.firstname' /></p>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						person: {
							firstname: 'zhang',
							lastname: 'san',
							fullname: ''
						}
					}
				},
				
				watch: {
					// 不能实现
					// person(n, o) {
					// 	console.log(n.firstname);
					// 	console.log(o.firstname);
					// }
					person:{
						handler(n,o){
							//console.log(n.firstname); 		//不能用n.firstname  会报错 与immediate:true冲突
                            console.log(n);
							console.log(o);			//输出出来的是新值
							// this.person.fullname = n.firstname+this.person.lastname
						},
						immediate:true,		//刷新就更新
						deep:true,			//深度监听  使得可以监听到person里面的firstname变化    否则不会有输出结果
						此时==》输出的n和o仍旧都是新值
					}

				}
			})
		</script>

         此时两个输出的值都是新值

  为了解决这个问题，使用深拷贝，把需要监听的变量先拷贝，然后监听拷贝后的变量

深拷贝监听事件

            const vm = new Vue({
				el: '#app',
				data() {
					return {
						person: {
							firstname: 'zhang',
							lastname: 'san',
							fullname: ''
						}
					}
				},
				  computed: {
				 	person2() {
				 		return JSON.parse(JSON.stringify(this.person));
				 	}
				 },
				watch: {
					
					
					
					// 实现o输出旧值，用深拷贝
					person2:{
						handler(n,o){
							console.log(n.firstname);
							console.log(o.firstname);
							// this.person.fullname = n.firstname+this.person.lastname
						},
						deep:true,
						// immediate:true,会与n.firstname
					}

				}
			})