VUE?組件的計算屬性詳解
前言
- 今天也是元氣滿滿的一天,今天整理一下VUE組件的計算屬性!~~
- 開始我們的學(xué)習(xí)之旅
計算屬性
- 先引用一張圖 來看一下計算屬性之間的關(guān)聯(lián):
注意: methods和computed里的東西不能重名
- method:定義方法,調(diào)用方法使用currentTime(),需要帶括號
- computed:定義計算屬性,調(diào)用屬性使用currenTime2,不需要帶括號:this.message是為了能夠讓currentTime2觀察到數(shù)據(jù)變化
- 如何在方法中的值發(fā)生了變化,則緩存就會刷新!可以在控制臺使用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: '楊宗緯 - 其實都沒有', author: '楊宗緯', songSrc: '楊宗緯 - 其實都沒有.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里定義了一個方法實現(xiàn)了和計算機(jī)屬性相同的效果,甚至該方法還可以接受參數(shù),使用起來更靈活,既然使用methods就可以實現(xiàn),那為什么還需要計算機(jī)屬性呢?原因就是計算機(jī)屬性是基于它的依賴緩存的。一個計算機(jī)屬性所依賴的數(shù)據(jù)發(fā)生變化時,它才會重新賦值,所以text只要不改變,計算機(jī)屬性也就不會更新
- 這里的Date.now()不是響應(yīng)式依賴,所以計算機(jī)屬性now不會更新。但是methods則不同,只要重新渲染,它就會被調(diào)用,因此函數(shù)也會被執(zhí)行。
總結(jié)
使用計算機(jī)屬性還是methods取決于你是否需要緩存,當(dāng)遍歷大數(shù)組和做大量計算時,應(yīng)當(dāng)使用計算機(jī)屬性,除非你不希望得到緩存。
到此這篇關(guān)于VUE 組件的計算屬性詳解的文章就介紹到這了,更多相關(guān)VUE 組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于vue,vue-router, vuex及addRoutes進(jìn)行權(quán)限控制問題
這篇文章主要介紹了基于vue,vue-router, vuex及addRoutes進(jìn)行權(quán)限控制問題,需要的朋友可以參考下2018-05-05vue3+elementPlus?table中國添加輸入框并提交校驗
這篇文章主要介紹了vue3+elementPlus?table里添加輸入框并提交校驗,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08vue 動態(tài)添加class,三個以上的條件做判斷方式
這篇文章主要介紹了vue 動態(tài)添加class,三個以上的條件做判斷方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11el-table?選中行與復(fù)選框相互聯(lián)動的實現(xiàn)步驟
這篇文章主要介紹了el-table?選中行與復(fù)選框相互聯(lián)動,分為兩步,第一步點擊行時觸發(fā)復(fù)選框的選擇或取消,第二步點擊復(fù)選框時觸發(fā)相應(yīng)行的變化,本文通過實例代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-10-10詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別,文中通過示例為大家進(jìn)行了詳細(xì)講解,對Vue感興趣的同學(xué),可以學(xué)習(xí)一下2022-04-04