使用Vue時(shí)，經(jīng)常遇到一個(gè)問(wèn)題，就是點(diǎn)擊按鈕或鏈接時(shí)頁(yè)面會(huì)出現(xiàn)抖動(dòng)的情況。這是因?yàn)閂ue默認(rèn)會(huì)給元素添加transition動(dòng)畫效果，而點(diǎn)擊操作會(huì)解綁元素中的v-for指令，導(dǎo)致元素重新計(jì)算大小、位置等屬性，從而出現(xiàn)抖動(dòng)現(xiàn)象。

//html
{{ item.text }}
//js
export default {
data() {
return {
items: [{id: 1, text: '按鈕1'}, {id: 2, text: '按鈕2'}, {id: 3, text: '按鈕3'}]
}
},
methods: {
handleClick() {
//處理點(diǎn)擊事件
}
}
}

解決這個(gè)問(wèn)題可以通過(guò)以下幾種方式：

1. 添加CSS代碼，禁用元素的transition動(dòng)畫效果。

//css
* {
transition: none !important;
}

2. 使用Vue提供的transition組件，將動(dòng)畫效果加到組件上。

//html
{{ item.text }}//css
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

3. 使用Vue提供的keep-alive組件，緩存組件狀態(tài)以避免重新渲染。

//html
{{ item.text }}//css
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

總的來(lái)說(shuō)，遇到Vue中點(diǎn)擊會(huì)抖動(dòng)的情況，可以通過(guò)禁用transition動(dòng)畫、使用transition組件或keep-alive組件緩存組件狀態(tài)等方式解決。這也反映了Vue的設(shè)計(jì)思想，即在保證高效渲染的同時(shí)，盡可能減少渲染次數(shù)，提高用戶體驗(yàn)。