碼雲實時更新學習demo地址：https://gitee.com/dxl96/vuexuexi
VUE基礎篇（計算屬性操作）
1、computed的基本用法
計算屬性操作是我們遇到一些稍顯複雜的計算或者拼接等場景下使用的，理解起來就是平時我們我們做計算或者拼接可以是用Mustache語法，也就是大括號的方式，比如：{{a * b}},{{firstStr + lastStr}} 等簡單計算拼接，但是如果我們遇到複雜情況，這種寫法就滿足不了我們的要求，同時這麼寫也顯得代碼冗餘，不容易維護
使用：vue實例對象中的computed屬性，在該屬性對應的對象中定義屬性，標籤中調用屬性即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性的基本操作和複雜操作</title>
</head>
<body>
<div id="app">
<!-- ■這兩種方式的計算拼接方式，是之前已經介紹了的，不好的地方就是不靈活，如果屬性過多，就會顯得雜亂，同時如果有複雜的計算這種就無能爲力了-->
<h2>{{firstName+" "+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<!-- ■用調用computed中計算的屬性的方式，記得不要加雙括號，因爲識別時這是個屬性而不是方法，它和methods異曲同工，
區別就是computed的屬性具有緩存的作用，同時調用方式methods是方法的調用方式，computed是屬性的調用方式，
遇到這種計算的場景時，儘量使用computed計算屬性的方式-->
<h2>{{fullName}}</h2>
<h2>總價格： {{totalPrice}}</h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: '開始了',
lastName: "結束了",
books: [{id: 110, name: "unix編程大全", price: 119},
{id: 111, name: "代碼大全", price: 105},
{id: 112, name: "深入理解虛擬機", price: 98},
{id: 113, name: "網絡編程", price: 87}]
},
computed: {
//計算屬性，屬性名儘量取名爲名詞，不要起名爲動詞，因爲這是屬性，不是方法
fullName: function () {
return this.firstName + " " + this.lastName
},
totalPrice: function () {
let totalPrice = 0;
this.books.forEach(function (value, index) {
totalPrice += value.price;
})
return totalPrice;
}
}
});
</script>
</body>
</html>
效果
2、computed和methods的區別
我們有個疑問：computed和methods看似都能夠實現我們的功能，那麼爲什麼會出現計算屬性呢？
原因：計算屬性會進行緩存，如果多次使用時，計算屬性只會調用一次,提升了性能
調用屬性和方法注意的點和區別？
1）用調用computed中計算的屬性的方式，記得不要加雙括號，因爲識別時這是個屬性而不是方法，它和methods異曲同工，區別就computed的屬性具有緩存的作用，也就是說計算屬性在調用一次之後，就不在執行計算屬性中的方法體內容，而是直接啓用緩存的值，只有當計算屬性方法體返回的值發生變化，才繼續執行計算屬性中的方法體
2）同時調用方式methods是方法的調用方式(要加括號，否則無法識別)，computed是屬性的調用方式（也就是調用時不要加括號，否則報錯），遇到這種計算的場景時，儘量使用computed計算屬性的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性的基本操作和複雜操作</title>
</head>
<body>
<div id="app">
<!-- ■這兩種方式的計算拼接方式，是之前已經介紹了的，不好的地方就是不靈活，如果屬性過多，就會顯得雜亂，同時如果有複雜的計算這種就無能爲力了-->
<span style="color: red">mustache語法:</span>
<h2>{{firstName+" "+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<hr>
<!-- ■用調用methods屬性中方法的方式進行計算，明顯比上面簡潔多了,用methods中的方法記得加上雙括號，因爲是調用方法的方式-->
<span style="color: red">調用方法的方式</span>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<hr>
<!-- ■用調用computed中計算的屬性的方式，記得不要加雙括號，因爲識別時這是個屬性而不是方法，它和methods異曲同工，
區別就是computed的屬性具有緩存的作用，同時調用方式methods是方法的調用方式，computed是屬性的調用方式，也就是調用時不要加括號，否則報錯，
遇到這種計算的場景時，儘量使用computed計算屬性的方式-->
<span style="color: red">調用計算屬性的方式</span>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>總價格： {{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: '開始了',
lastName: "結束了",
books: [{id: 110, name: "unix編程大全", price: 119},
{id: 111, name: "代碼大全", price: 105},
{id: 112, name: "深入理解虛擬機", price: 98},
{id: 113, name: "網絡編程", price: 87}]
},
/*
■我們有個疑問：computed和methods看似都能夠實現我們的功能，那麼爲什麼會出現計算屬性呢？
原因：計算屬性會進行緩存，如果多次使用時，計算屬性只會調用一次,提升了性能
*/
computed: {//計算屬性，屬性名儘量取名爲名詞，不要起名爲動詞
fullName: function () {
console.log("調用計算屬性fullName")
return this.firstName + " " + this.lastName
},
totalPrice: function () {
let totalPrice = 0;
this.books.forEach(function (value, index) {
totalPrice += value.price;
})
return totalPrice;
}
},
methods: {
getFullName: function () {
console.log("調用方法getFullName")
return this.firstName + " " + this.lastName
}
}
});
</script>
</body>
</html>
效果
3、computed計算屬性的getter和setter
口通常計算屬性都包含有一個getter和一個setter，上面的方式我們只是用了getter來讀取
口在某些情況下，你也可以提供一個setter方法（不常用）
口默認情況下只有get方法，上面兩種只有get方法，是一種簡寫方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性的基本操作和複雜操作</title>
</head>
<body>
<div id="app">
<!-- ■用調用computed中計算的屬性的方式，記得不要加雙括號，因爲識別時這是個屬性而不是方法，它和methods異曲同工，
區別就是computed的屬性具有緩存的作用，同時調用方式methods是方法的調用方式，computed是屬性的調用方式，也就是調用時不要加括號，否則報錯，
遇到這種計算的場景時，儘量使用computed計算屬性的方式-->
<h2>{{fullName}}</h2>
<h2>{{hasGetAndSetFullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: '開始了',
lastName: "結束了",
},
/*
■我們有個疑問：computed和methods看似都能夠實現我們的功能，那麼爲什麼會出現計算屬性呢？
原因：計算屬性會進行緩存，如果多次使用時，計算屬性只會調用一次,提升了性能
*/
computed: {//計算屬性，屬性名儘量取名爲名詞，不要起名爲動詞
fullName: function () {
return this.firstName + " " + this.lastName
},
//■通常計算屬性都包含有一個getter和一個setter，上面兩個方法我們只是用了getter來讀取
//■在某些情況下，你也可以提供一個setter方法（不常用）
//■默認情況下只有get方法，上面兩種只有get方法，是一種簡寫方式
hasGetAndSetFullName: {
get: function () {
return this.firstName + " " + this.lastName
},
/* ■賦值的時候怎麼賦值呢？
答：比如這裏，就是 app.hasGetAndSetTotalPrice = "hello word" 這種賦值方式，因爲hasGetAndSetTotalPrice是一個屬性，我們直接對
hasGetAndSetTotalPrice這個屬性進行賦值，vue會解析調用set方法，並且將值傳入，這樣newValue就能接收到
*/
set: function (newValue) {
console.log(newValue);
let split = newValue.split(" ");
this.firstName = split[0];
this.lastName = split[1];
}
}
}
});
</script>
</body>
</html>
效果
初始時：
修改值：
修改後：
