當我們在播放音樂時，很可能會需要顯示歌詞。而vue實現歌詞滾動是一個非常常見的需求。在vue中實現歌詞滾動需要使用到vue組件化思想以及vue的動態綁定等知識。

首先，我們需要將歌詞數據通過組件傳入。在vue中，可以使用props來接收父組件傳過來的數據。比如：

props: {
lyrics: {
type: Array,
required: true
}
}

接下來，我們需要綁定歌詞滾動的樣式。在vue中，可以通過動態綁定class實現。比如：

:class="{'active': currentIndex === index}"

這樣就可以根據當前歌詞的索引與遍歷到的歌詞索引進行比較，通過控制active類的添加和刪除來實現歌詞滾動的效果。

接下來，我們需要實現滾動的動畫效果。在vue中，可以使用transition組件實現動畫效果。比如：

{{ item.content }}

這樣就可以根據transition組件的in-out類名來實現歌詞滾動的動畫效果。

與此同時，我們還可以通過計算屬性來動態計算歌詞滾動的位置，并通過ref屬性獲取到歌詞滾動的元素來修改scrollTop值來實現歌詞滾動。比如：

computed: {
lyricEle () {
return this.$refs.lyricEle
},
offsetTop () {
if (!this.lyricEle) {
return 0
}
return -(this.currentIndex - 2) * 30
}
},
watch: {
offsetTop () {
if (isNaN(this.offsetTop)) {
return false
}
this.$refs.lyricEle.scrollTo({
top: this.offsetTop,
behavior: 'smooth'
})
}
}

這樣，我們就可以根據計算屬性動態計算歌詞滾動的位置，并使用watch監聽計算屬性的變化來修改scrollTop值。

總結一下，vue實現歌詞滾動需要掌握的知識點主要是組件化思想、props屬性、動態綁定class、transition組件、計算屬性以及ref屬性。只有掌握了這些知識點，我們才能實現高效、美觀的歌詞滾動效果。