v for與v if的優先順序

一般我們在兩種常見的情況下會傾向於這樣做：

詳解當 vue 處理指令時，v-for比v-if具有更高的優先順序，所以這個模板：


v-for="user in users"
v-if="user.isactive"
:key="user.id"
>
}li>
ul>

將會經過如下運算：

this.users.map(function (user) 
})

因此哪怕我們只渲染出一小部分使用者的元素，也得在每次重渲染的時候遍歷整個列表，不論活躍使用者是否發生了變化。

通過將其更換為在如下的乙個計算屬性上遍歷：

computed: )
}}


v-for="user in activeusers"
:key="user.id"
>
}li>
ul>

我們將會獲得如下好處：

為了獲得同樣的好處，我們也可以把：


v-for="user in users"
v-if="shouldshowusers"
:key="user.id"
>
}li>
ul>

更新為：


v-for="user in users"
:key="user.id"
>
}li>
ul>

通過將v-if移動到容器元素，我們不會再對列表中的每個使用者檢查shouldshowusers。取而代之的是，我們只檢查它一次，且不會在shouldshowusers為否的時候運算v-for。

反例


v-for="user in users"
v-if="user.isactive"
:key="user.id"
>
}li>
ul>


v-for="user in users"
v-if="shouldshowusers"
:key="user.id"
>
}li>
ul>

好例子


v-for="user in activeusers"
:key="user.id"
>
}li>
ul>


v-for="user in users"
:key="user.id"
>
}li>
ul>

v for和v if優先順序

原始碼位置vue src complier codegen index.js function genelement el astelement,state codegenstate string if el.staticroot el.staticprocessed else if el.once...

v if 和v for的優先順序

當v if與v for一起使用時，v for具有比v if更高的優先順序，這意味著v if將分別重複執行於每個v for迴圈中所以，不推薦v if和v for同時使用 for user in activeusers key user.id li ul 或者 shouldshowusers for ...

1 v for和v if的優先順序哪個更高

doctype html vue事件處理 title head demo v for和v if誰的優先順序高？應該如何正確使用避免效能問題？h1 for child in children v if isfolder p div vue.js script 建立例項 newvue computed ...

v for與v if的優先順序

v for和v if優先順序

v if 和v for的優先順序

1 v for和v if的優先順序哪個更高

相關推薦