Vue的計算屬性
computed，就是一個函式簡單點說，它就是一個能夠將計算結果快取起來的屬性（將行為轉化成了靜態的屬性），類似快取！
代碼示例：這里撰寫兩個回傳當前時間戳的方法，分別在methods屬性和計算屬性computed中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>compute</title>
</head>
<body>
<div id="compute">
currentTime1: {{currentTime1()}} <!--方法-->
<br>
currentTime2: {{currentTime2}} <!--屬性-->
</div>
<!--匯入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vue = new Vue({
el: "#compute",
methods: {
currentTime1: function () {
return Date.now(); //回傳當前時間戳
}
},
computed: { //計算屬性computed
currentTime2: function () {
return Date.now();
}
}
})
</script>
</body>
</html>
注意：methods 和 computed 中的方法不能重名
效果演示：
可見兩種實作都回傳了當前時間戳，區別：
-
currentTime1是一個方法，通過
.方法名()呼叫，需要帶括號 -
currentTime2不是一個方法，而是一個計算屬性，直接
.屬性名呼叫，不需要帶括號
計算屬性呼叫后，直接被快取在記憶體中，所以再次呼叫值不會改變
如果我們將currentTime2修改為：
<script>
var vue = new Vue({
el: "#compute",
data: {
message: "hello"
},
methods: {
currentTime1: function () {
return Date.now(); //回傳當前時間戳
}
},
computed: { //計算屬性computed
currentTime2: function () {
this.message;
return Date.now();
}
}
})
</script>
我們在控制臺呼叫currentTime2，值不會發生變化，但是當我們修改message的值后，再次呼叫currentTime2，此時可以看到值發生變化，也就是進行了重新的計算；
-
這里的
this.message是為了能夠讓currentTime2觀察到資料變化而變化，如果方法中的值發生變化，則會重繪重新計算 -
這就和快取一模一樣，比如MyBatis的快取，第一次計算存在結果里面，一旦有增刪改，快取立馬失效，重新計算
-
這也就是虛擬Dom的概念，，減少了真實 DOM 操作，在記憶體中模擬 DOM操作，有效的提升了前端渲染效率
結論：
-
currentTime1和currentTime2看起來都是函式function，但是通過計算屬性可以用記憶體去做：比如計算1+1，第二次再計算的時候就沒必要再通過函式，直接從記憶體中獲取結果即可；這便從側邊節省了瀏覽器的成本；如果有大量方法呼叫，瀏覽器就會卡死，但是如果從記憶體中呼叫，速度就會很快
-
呼叫方法時，每次都需要進行計算，既然有計算程序則必定產生系統開銷，那如果這個結果是不經常變化的呢？此時就可以考慮將這個結果快取起來，采用計算屬性可以很方便的做到這一點，計算屬性的主要特性就是為了將不經常變化的計算結果進行快取，以節約我們的系統開銷；
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/251817.html
標籤：其他
上一篇：uni-app實戰教程-----H5移動app以及小程式(三)---頁面跳轉以及底部選項
下一篇：Python爬蟲自學系列（四）