計算屬性的 setter 和 getter
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性、方法、偵聽器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
{{age}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
age:28
},
//計算屬性
computed:{
fullName:function(){
console.log("計算了一次")；
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html> 方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性的 setter 和 getter</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
},
//計算屬性
computed:{
fullName:{
get:function(){
return this.firstName + " " + this.lastName
},
set:function(value){
console.log(value);
}
}
}
})
</script>
</body>
</html> 輸出：
改變fullName的值，第一個是輸出的，第二個是傳回的
做出下列改動：var arr = value.split(""); this.firstName = arr[0]; this.lastName = arr[1];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性的 setter 和 getter</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
},
//計算屬性
computed:{
fullName:{
get:function(){
return this.firstName + " " + this.lastName
},
set:function(value){
var arr = value.split("");
this.firstName = arr[0];
this.lastName = arr[1];
console.log(value);
}
}
}
})
</script>
</body>
</html> 這時的值随輸入的也發生變化，compute 的特點：當依賴的值發生變化則會重新計算，當重新輸入值時導緻
firstName 的值發生變化，進而導緻 compute 重新計算 fullName 的值發生變化
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)