這篇文章主要介紹了VUE組件的計(jì)算屬性詳解，使用計(jì)算機(jī)屬性還是methods取決于你是否需要緩存，當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)，應(yīng)當(dāng)使用計(jì)算機(jī)屬性，除非你不希望得到緩存，下文來(lái)了解具體詳情

前言

今天也是元?dú)鉂M滿的一天，今天整理一下VUE組件的計(jì)算屬性！~~
開(kāi)始我們的學(xué)習(xí)之旅

計(jì)算屬性

先引用一張圖來(lái)看一下計(jì)算屬性之間的關(guān)聯(lián)：

注意: methods和computed里的東西不能重名

method:定義方法,調(diào)用方法使用currentTime(),需要帶括號(hào)
computed:定義計(jì)算屬性,調(diào)用屬性使用currenTime2,不需要帶括號(hào):this.message是為了能夠讓currentTime2觀察到數(shù)據(jù)變化
如何在方法中的值發(fā)生了變化,則緩存就會(huì)刷新!可以在控制臺(tái)使用vm.message="HelloShit!"

 <div id='app'>
        <audio :src="currentSrc" controls autoplay @ended='handleEnded'></audio>
        <ul>
            <li :class='{active:index===currentIndex}' v-for='(item,index) in musicData' :key='item.id'
                @click='handleClick(item.songSrc,index)'>
                <h2>{{item.id}}-歌名：{{item.name}}</h2>
                <p>{{item.author}}</p>
            </li>
        </ul>
        <button @click='handleNext'>下一首</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        const musicData = [{
                id: 1,
                name: '楊宗緯 - 空白格',
                author: '楊宗緯',
                songSrc: '楊宗緯 - 空白格 (Live).mp3'
            },
            {
                id: 2,
                name: '楊宗緯 - 其實(shí)都沒(méi)有',
                author: '楊宗緯',
                songSrc: '楊宗緯 - 其實(shí)都沒(méi)有.flac'
            },
            {
                id: 3,
                name: '楊宗緯 - 我想要',
                author: '楊宗緯',
                songSrc: '楊宗緯 - 我想要 (Live).flac'
            }
        ];

        new Vue({
            el: '#app',
            data: {
                musicData,
                currentSrc: '楊宗緯 - 空白格 (Live).mp3',
                currentIndex: 0
            },
            methods: {
                handleClick(src, index) {
                    this.currentSrc = src;
                    this.currentIndex = index;
                },
                handleEnded() {
                    // // 下一首的播放
                    // this.currentIndex++;
                    // this.currentSrc = this.musicData[this.currentIndex].songSrc;
                    this.handleNext();
                },
                handleNext() {
                    this.currentIndex++;
                    if (this.currentIndex === this.musicData.length) {
                        this.currentIndex = 0;
                    }
                    this.currentSrc = this.musicData[this.currentIndex].songSrc
                }
            }
        })
    </script>

在methods里定義了一個(gè)方法實(shí)現(xiàn)了和計(jì)算機(jī)屬性相同的效果，甚至該方法還可以接受參數(shù)，使用起來(lái)更靈活，既然使用methods就可以實(shí)現(xiàn)，那為什么還需要計(jì)算機(jī)屬性呢？原因就是計(jì)算機(jī)屬性是基于它的依賴緩存的。一個(gè)計(jì)算機(jī)屬性所依賴的數(shù)據(jù)發(fā)生變化時(shí)，它才會(huì)重新賦值，所以text只要不改變，計(jì)算機(jī)屬性也就不會(huì)更新
這里的Date.now()不是響應(yīng)式依賴，所以計(jì)算機(jī)屬性now不會(huì)更新。但是methods則不同，只要重新渲染，它就會(huì)被調(diào)用，因此函數(shù)也會(huì)被執(zhí)行。