二 计算和监听属性
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>
<div id="app">
姓:
<input type="text" placeholder="First Name" v-model="firstName"><br>
名:
<input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名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(){
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)
const names = value.split('<->');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch:{
firstName:function(value){
console.log("watch firstName","当发生改变之后，修改fullName2的值");
this.fullName2=value+" "+this.lastName;
}
}
});
vm.$watch("lastName",function(newValue,oldValue){
console.log(newValue,"===",oldValue);
this.fullName2=this.firstName+"=>"+newValue;
});
};
</script>
</body>
</html>
