Vue之computed(计算属性)详解get()、set()

Vue的计算属性：

1.在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。

2.通过getter\setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。

<div id="demo">
		姓：<input type="text" placeholder="firstName" v-model="firstName"><br>
		名：<input type="text" placeholder="lastName" v-model="lastName"><br>
		姓名1(单向):<input type="text" placeholder="FullName1" v-model="fullName1"><br>
		姓名2(双向):<input type="text" placeholder="FullName2" v-model="fullName2"><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const demo = new Vue({
		el : '#demo',
		data : {
			firstName : 'A',
			lastName : 'B',
			fullName2 : 'A B'
		},
		computed : {//计算属性相当于data里的属性
			//什么时候执行：初始化显示/ 相关的data属性发生变化
			fullName1(){//计算属性中的get方法，方法的返回值就是属性值
				return this.firstName + ' ' + this.lastName
			},

			fullName3 : {
				get(){//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
					return this.firstName + ' ' + this.lastName
				},
				set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
					//val就是fullName3的最新属性值
					console.log(val)
					const names = val.split(' ');
					console.log(names)
					this.firstName = names[0];
					this.lastName = names[1];
				}
			}
		}

	})


</script>

改变姓和名时，对应的姓名1和姓名2会发生改变。

改变姓名1时，姓和名、姓名2都不会改变。

改变姓名2时，对应的姓和名，以及姓名1也会改变。