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

目录

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

简单使用

复杂使用

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

 3.侦听器watch

 监听变量为对象

深拷贝监听事件

---

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

简单使用

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

		

			
{{firstname}}
			
{{lastname}}
			
属性中的{{fullName}}
			
方法中{{sumname()}}
		
		
		

复杂使用

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

			
总价：{{totalpice}}
		
		

 

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

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

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

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

 3.侦听器watch

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

	

			
fullname：{{fullname}}
			
firstname：
		
		
		

 监听变量为对象

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

        

			
			
fullname：{{person.fullname}}
			
firstname：
		
		

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

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

深拷贝监听事件

            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
					}

				}
			})