同じ要素でv-ifとv-forを使用しないのはなぜですか

Vueの担当者は、v-forおよびv-ifを使用しないことを強くお勧めします。同じ要素で

v-forはv-ifよりも優先度が高いため、v-ifを介してコンテンツの一部をレンダリングするだけでよい場合でも、必要なコンテンツにあるかどうかに関係なく、再レンダリングするたびにリスト全体をトラバースする必要があります。変更が発生したため、同じ要素でv-forとv-ifを同時に使用しないことは、パフォーマンスを向上させる手段です。

もちろん、このタイプの操作を実行する必要性は、一般に2つの状況に分けられます。

1つは、リスト内のアイテムをフィルタリングする

例：

<ul>
    <li
	v-for="user of users"
	v-if="user.isActive"
	:key="user.id"
	>
     {
   
   {user.name}}
    </li>
</ul>

次のように書き直すことができます。

計算属性を定義してリストをフィルタリングし、v-forを使用して計算属性をトラバースします

computed: {
    
    
	activeUsers() {
    
    
		return this.users.filter( user => {
    
    
			return user.isActive		
		})	
	}
}

テンプレートの変更：

<ul>
    <li
        v-for="user of activeUsers"
        :key"user.id"
    >
        {
   
   {user.name}}
    </li>
</ul>

書き換えた後、次の利点があります。

• 計算属性の内容は、元のリストが変更された場合にのみ再計算され、毎回元のリストをトラバースする必要はありません。
• レンダリング時に必要なものだけをレンダリングする
• コードの保守性を向上させるために、レンダリングレイヤーのロジックを分離します

次に、表示する必要があるリストのみをレンダリングします

<ul>
    <li
        v-for="user of users"
        v-if="showUsers"
        :key="user.id"
    >
    </li>
</ul>

パッケージコンテナにv-if判定を追加すると、各アイテムのshowUsers属性を毎回チェックする必要はありませんが、一度チェックするだけで、showUsersがfalseの場合はv-for操作を実行しません。

<ul v-if="showUsers">
    <li
    	v-for="user of users"  
        :key="user.id"
  	>
    </li>
</ul>