我很難通過v-for.
這是我的打字稿代碼：
<template>
<template v-for="item in list" :key="item.id">
<TestComponent @mouseenter="hoveredItem = item" @mouseleave="hoveredItem = null" />
</template>
<div v-if="hoveredItem">hovered</div>
</template>
<script lang="ts">
import TestComponent from 'TestComponent.vue';
import { Options, Vue } from 'vue-class-component';
interface IItem {id:number, message:string};
@Options({
props:{},
components:{ TestComponent, }
})
export default class TestView extends Vue {
public list:IItem[] = [];
public hoveredItem:IItem|null = null;
public mounted():void {
for (let i = 0; i < 3; i ) {
this.list.push({ id:i, message:"Message " (i 1), });
}
}
}
</script>
當我翻轉一個專案時（請參閱@mouseeenter），會在串列中所有render()不必要的專案上觸發a 。我檢查了顯示串列中每個專案的這些事件的擴展：Vue Devtools
- 渲染開始
- 渲染結束
- 補丁開始
- 補丁結束
如果我洗掉以下行，則不會觸發渲染/補丁：
<div v-if="hoveredItem">hovered!</div>
如果不是將專案實體存盤到hoveredItem我只是提出一個標志來顯示該 div，我沒有問題。
如果不是實體化<TestComponent>我使用一個簡單的<div>的我沒有問題。
如果我不使用 av-for但手動實體化專案，我沒有問題。
如果我從 $emit 自定義事件而不是使用本機 @mouseover
<TestComponent>就是這樣：
<template>
<div>item</div>
</template>
這是一個代碼框，顯示了第一個示例的問題以及通過子組件https://dh5ldo.csb.app中的 $emit() 進行的修復
您是否有任何暗示為什么第一個示例在我們不期望的情況下觸發所有串列項的渲染？
謝謝你讀我:)
uj5u.com熱心網友回復：
好的，我終于想通了。
看完這篇文章：
https ://codeburst.io/5-vue-performance-tips-98e184338439
..鏈接到這個 github 答案： https ://github.com/vuejs/core/issues/3271#issuecomment-782791715
基本上，當在 v-for 上使用組件時，Vue 需要知道何時必須更新它。
為了實作這一點，它會查找 DOM 上使用的任何道具并建立快取以更快地進行進一步的更新。
但是當在事件處理程式上使用道具時，Vue 無法構建該快取。
如果該道具被更新，Vue 將知道它已鏈接到您的組件，但它不知道它是否真的應該觸發渲染。它會觸發它以防萬一。
如果您在串列的每個實體上使用道具，則該道具的任何更新都將觸發所有專案的渲染。
但我不清楚的是，如果我只是從我的第一篇文章的示例中洗掉這一行，為什么不會發生這種情況：
<div v-if="hoveredItem">hovered!</div>
仍在我的hoverItem事件處理程式上使用，因此它仍應觸發渲染。
TLDR ; 不要在組件事件處理程式中使用任何屬性/變數
（免責宣告：我可能沒有正確理解事情，如果我在某些方面錯了，請道歉）
uj5u.com熱心網友回復：
你:key="item.id"應該在<TestComponent>，它不起作用<template>
<template>
<template v-for="item in list" :key="item.id">
<TestComponent @mouseenter="hoveredItem = item" @mouseleave="hoveredItem = null" />
</template>
<div v-if="hoveredItem">hovered</div>
</template>
我還建議您使用 linter，這樣它會顯示您的此類錯誤
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/529661.html