記錄個人Vue.js從會用到精通之路 5

計算屬性的奧妙

讓咱們來看一小行代碼

<div class="juejin">
    {{ number1 + number2}}
</div>
複製代碼

咱們立馬就能夠表達式的目的是求兩數和 但若是是這樣呢？

<div class="juejin> {{ message.split('').reverse().join('') }} </div> 複製代碼

此次是否是就得琢磨一下了，最後咱們知道是要翻轉字符串。

可是這是咱們的View層呀，過多的邏輯不該該出如今這裏，應該使用計算屬性。

計算屬性computed是如何實現的呢？

computed:{
    myMessage (){
        return this.message.split('').reverse().join('');
    }
}
複製代碼

咱們在這裏聲明瞭一個計算屬性：myMessage。而咱們提供的函數，將做爲vm.myMessage的getter函數。巧妙的是，隨着vm.message的更改，vm.myMessage的值也會變，咱們用聲明的方式建立了這種依賴關係。

計算屬性的setter

經過上面咱們知道了計算屬性computed的實現其實是重寫了屬性對應的getter方法，那咱們不由想問setter也能夠重寫嗎？ 能夠

const vm = new Vue({
    // ...
    computed : {
        myMessage : {
            get(){
                return this.message + 'juejin';
            },
            set(){
                // ...
            }
        }
    }
})
複製代碼

值得注意的是，若是咱們沒有給計算屬性聲明一個set方法，那麼vm.myMessage會直接報錯：

[Vue warn]: Computed property "myMessage" was assigned to but it has no setter.

計算屬性與方法該如何取捨?

或許有的同志要問了：我用方法也能夠達到一樣的效果，他倆有什麼不一樣嗎？

不一樣點就在於： 計算屬性是基於他們的響應式依賴進行緩存的，只有在相關的響應式依賴發生改變的時候，他們纔會從新求值，以上述爲例，若是vm.message的值沒有發生改變，那麼屢次訪問vm.myMessage的話，返回的是以前的計算結果，由於它的依賴vm.message沒有發生改變。

舉個栗子

computed:{
    nowTime : function(){
        return Date.now();
    }
}
複製代碼

屢次訪問vm.nowTime可是獲得的都是一個值，不會實時返回，這是由於Date.now()不是響應式依賴。可是因爲緩存的存在，咱們能夠避免重複的進行屢次大量數據的計算。

若是咱們不用computed而用methods，那麼每次觸發從新渲染，都會再次執行函數。若是你不但願有緩存這個玩意兒，用methods代替computed。

你們都知道watch這個API，他也能夠實現computed的功能，那他倆有什麼區別呢？下一篇文章再論