二 计算和监听属性
2.1 computed
计算属性,在 computed 属性对象中定义计算属性的方法,在页面中使用{方法名}来显示计算的结果。
- 包含多个方法的对象,对状态属性进行计算返回一个新的数据, 供页面获取显示。
- 一般情况下是相当于是一个只读的属性,可以利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化
- 如何给对象定义get/set属性
- 在创建对象时指定:
get name () {return xxx} / set name (value) {}
- 对象创建之后指定:
Object.defineProperty(obj, age, {get(){}, set(value){}})
2.2 watch
监听属性,通过 vm 对象的$watch()或 watch 配置来监视指定的属性,当属性变化时, 回调函数自动调用, 在函数内部进行计算。
包含多个属性监视的对象,分为一般监视和深度监视
xxx: function(value){}
xxx : {
deep : true,
handler : fun(value)
}
另一种添加监视方式: vm.$watch('xxx', function(value){})
2.3 示例代码
<!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计算
-->
<div id="app">
姓: <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>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
window.onload=function (){
const vm = new Vue({
el:"#app",
data:{
firstName:"pang",
lastName:"sir",
fullName2:"pang=>sir"
},
computed:{
fullName1:function(){//firstName和lastName的改变会影响fullName1,反之不会
console.log("fullName1",Math.random());
return this.firstName+" "+this.lastName;//返回新的数据
},
fullName3:{
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get:function(){
return this.firstName+"<->"+this.lastName;
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set:function(value){
console.log('fullName3 set()', value)
// 更新firstName和lastName
const names = value.split('<->');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch:{
// 方式1-配置监视属性:firstName
firstName:function(value){//value就是改变的值相当于set方法
console.log("watch firstName","当发生改变之后,修改fullName2的值");
this.fullName2=value+" "+this.lastName;
}
}
});
// 方式2-配置监视属性:lastName
// 参考API:https://cn.vuejs.org/v2/api/#vm-watch
vm.$watch("lastName",function(newValue,oldValue){
console.log(newValue,"===",oldValue);
//更新fullName2
this.fullName2=this.firstName+"=>"+newValue;
});
};
</script>
</body>
</html>