计算属性和监视
1.4.1. 计算属性
1）在 computed 属性对象中定义计算属性的方法
2）在页面中使用{{方法名}}来显示计算的结果
1.4.2. 监视属性
1）通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
2）当属性变化时, 回调函数自动调用, 在函数内部进行计算
1.4.3. 计算属性高级
1）通过 getter/setter 实现对属性数据的显示和监视
2）计算属性存在缓存, 多次读取只执行一次 getter 计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算
getter：属性的get方法
setter：属性的set方法
-->
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
// fullName1: 'A B'
fullName2: 'A B'
},
computed: {
// 什么时候执行：初始化显示/相关的data属性数据发生改变
// 计算并返回当前属性的值
fullName1(){//计算属性的一个方法，方法的返回值作为属性值
console.log('fullName1()');
return this.firstName + ' ' + this.lastName;
},
fullName3: {
/*
回调函数要满足3个条件：
1、你定义的；
2、你没有调用；
3、但最终它执行了
什么时候调用？
用来做什么？
*/
// 回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
get(){
return this.firstName + ' ' + this.lastName;
},
// 回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
set(value){// value就是fullName3的最新属性值
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch: {//配置监视
firstName: function(value){//firstName发生了变化
console.log(this);//就是VM对象
this.fullName2 = value + ' ' + this.lastName;
}
}
})
vm.$watch('lastName', function(value){
// 更新fullName2
this.fullName2 = this.firstName + ' ' + value;
});
</script>
</body>
</html>