當我們使用vue開發(fā)網(wǎng)站時，經(jīng)常需要實現(xiàn)一些交互效果，比如聯(lián)動效果。在vue中，我們可以使用v-model或者watch監(jiān)聽來實現(xiàn)數(shù)據(jù)的聯(lián)動，但是當數(shù)據(jù)量大的時候，聯(lián)動會變得很卡，甚至?xí)鬼撁婵ㄋ馈Ｏ旅婢蜑榇蠹抑v解一些vue聯(lián)動優(yōu)化的技巧。

1. 防抖和節(jié)流

function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
function throttle(fn, wait) {
var timeout = null;
return function() {
if(timeout === null) {
timeout = setTimeout(function(){
fn();
timeout = null;
}, wait)
}
}
}

在vue中，可以使用throttle來優(yōu)化輸入框聯(lián)動的效果，使用debounce來優(yōu)化滾動事件等高頻觸發(fā)的聯(lián)動效果

2. 數(shù)據(jù)緩存

let list = [];
let filterList = [];
loadData(){
 axios.get('/api/list').then(res => {
list = res.data;
filterList = list.filter(item => item.age > 18);
 })
},

在這個例子中，我們可以對請求到的數(shù)據(jù)進行緩存，這樣在聯(lián)動篩選的時候，就可以直接操作緩存中的數(shù)據(jù)，減少http請求的次數(shù)，提高聯(lián)動效率

3. 組件異步加載

const Home = () => import('@/views/Home.vue', () => {
console.log('Home Loaded')
});

當項目較為復(fù)雜時，可以將組件按需異步進行加載，減少首次渲染的網(wǎng)絡(luò)請求時間，提高頁面的響應(yīng)速度。