Vue filter this 關(guān)鍵字用于指代當(dāng)前組件實(shí)例，其常見用法為在組件內(nèi)部的方法中使用 this 調(diào)用實(shí)例的屬性和方法。

下面是一個(gè)簡(jiǎn)單的實(shí)例，使用 filter 過濾數(shù)組中的元素，其中 this 關(guān)鍵字用于指代當(dāng)前組件實(shí)例：

// template
<div v-for="item in filterItems" :key="item.id">
{{ item.name }}
</div>
// script
export default {
data() {
return {
items: [
{ id: 1, name: 'apple', isFruit: true },
{ id: 2, name: 'beef', isFruit: false },
{ id: 3, name: 'banana', isFruit: true },
{ id: 4, name: 'pork', isFruit: false },
]
};
},
methods: {
filterItems() {
return this.items.filter(item =>item.isFruit);
}
}
};

通過調(diào)用 this.items 獲取組件實(shí)例的 data 中的 items 數(shù)組，通過 filter 過濾出 isFruit 為 true 的元素。

需要注意的是，如果在箭頭函數(shù)中使用 this 關(guān)鍵字時(shí)，需要綁定當(dāng)前組件實(shí)例，因?yàn)榧^函數(shù)內(nèi)部的 this 指向不能被更改：

// script
export default {
methods: {
handleClick: _.debounce(() =>{
console.log(this.msg);
}, 500)
}
};

上述代碼中使用了 debounce 函數(shù)來防抖處理點(diǎn)擊事件，箭頭函數(shù)內(nèi)部將 this 關(guān)鍵字指向了外部作用域，需要使用 lodash 的方法將 this 綁定到當(dāng)前組件實(shí)例上。