Vue之計算屬性詳解
阿新 • • 發佈：2021-11-18
1、何為計算屬性：大白話講就是計算出來的結果儲存在屬性當中，可以想象為快取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--注意了同志們是cuHtsUXwkrrentTime1()，這裡有加括號的，是方法呼叫.-->HtsUXwk;
<p>currentTime1：{{currentTime1()}}</p>
<!--這裡的currentTime1是沒有加括號的，通過屬性進行呼叫的-->
<p>currentTime2：{{currentTime2}}</p>
</div>http://www.cppcns.com 執行結果：
可能咋一看好像沒什麼區別呀。
但是我們仔細思考一下，一個是方法，一個是屬性。
如下所示：
<div id="app">
<!--注意了同志們是currentTime1()，這裡有加括號的，是方法呼叫.-->
<p>currentTime1：{{currentTime1()}}</p>
<!--這裡的currentTime1是沒有加括號的，通過屬性進行呼叫的-->
<p>currentTime2：{{currentTime2}}</p>
</div>
重點：屬性是存值的，有新的值進來才會改變，不然就跟快取一樣，我們來看這個：
解釋一下：
1.在1、2當中我們可以看出，一個是方法一個是屬性，屬性用方法來呼叫肯定是不行的。
2.在1、3當中我們可以看出，方法呼叫的值一直在變，但是屬性呼叫的值沒有改變這就跟他是快取機制一樣
3.在3、4、5當中我們就可以看出，當我們一旦改變了函式當中的值，就相當於改變了快取中的值，那麼他就會重新整理值。
總結
呼叫方法時，每次都需要進行計算，既然有計算過程則必定產生系統開銷，那如果這個結果是不經常變化的呢？此時就可以考慮將這個結果快取起來。採用計算機屬性可以很方便做到這一點。計算機屬性的主要特性就是為了將不經常變化的計算結果進行快取，以節約我們的系統開銷。-----小夥伴們明白了嗎？
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!