技術標籤：vue前端vuejshtml前端

這期的主題是Vue的計算屬性computed。
我們都知道插值表示式{{}}，{{}}可以實現雙向的資料繫結，並且可以在其中進行一些常規的算數運算和邏輯運算。
但是模板內的表示式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護，在之前我們可以使用methods實現這種效果，但是computed相比methods來說，速度更快，因為computed是基於依賴快取的，快取的特點就是一個字，快！
我們來看一下具體的程式碼實現。

這是利用methods完成字串反轉的方法。

<div id="app"
 
>
    <h3>{{reverseMsg()}}</h3>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'Hello World!'
        },
        methods: {
             reverseMsg:function(){
               return  this.msg.split('').reverse().join('');
            }
 
,
        }
    });
</script>

這是利用計算屬性computed實現字串反轉的方法。

<div id="app">
    <h3>{{reverseMsg}}</h3>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'Hello World!',
        },
        computed: {
            reverseMsg:
 
function(){
               return  this.msg.split('').reverse().join('');
            },        }
    });
</script>

都可以正常地完成我們的需求，但是，它們之間還是有區別的。
Vue的官方文件為我們提示了

計算屬性是基於它們的響應式依賴進行快取的，只有相應的響應式依賴發生改變時它們才會重新求值。

這句話是啥意思呢，就是，methods實現這個反轉字串的時候，每次都會執行reverseMsg這個函式，請注意，是每次。。。
但是computed實現這個反轉字串的時候，只有第一次才真正的執行這個函式，並把結果存入快取中，之後再需要用到的時候，它直接去快取裡面取，不會重複執行這個函式。這還是很有意義的，computed才能在這種需求中實現最佳效能。

<div id="app">
    <h3>{{reverseMsg}}</h3>
    <h3>{{fullName}}</h3>
    <button @click="handeClick">改變</button>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'Hello World!',
            firstName:'Creator',
            lastName:'Ray'
        },
        methods: {
            handeClick(){
                this.msg = '計算屬性computed生效!';
                this.lastName = 'God';
            }
        },
        computed: {
            reverseMsg:function(){
               return  this.msg.split('').reverse().join('');
            },
            fullName:function(){
                return this.firstName + this.lastName;
            }
        }
    });
</script>

再看一下這段程式碼，我們用計算屬性關聯了fullName，並且我們寫了一個按鈕，用來改變fullName中這些data值得資料，看一下計算屬性發生什麼改變。

很明顯，我們點選按鈕之後，msg和lastName的值都發生了變化，並且，因為我們是用計算屬性實現這一功能的，所以計算屬性的reverseMsg和fullName也被執行了。這說明計算屬性的繫結是永續性的，並且當對應的值發生變化後，計算屬性會立即被執行，還是很方便的。

有微信小程式課設、畢設需求聯絡個人QQ：505417246

關注下面微信公眾號，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料
最新最全的前端知識總結和專案原始碼都會第一時間釋出到微信公眾號，請大家多多關注，謝謝！