这篇文章主要介绍了vue2和vue3的v-if与v-for优先级对比学习，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue.js 中使用最多的两个指令就是 v-if 和 v-for ，因此我们可能会想要同时使用它们。虽然官方不建议这样做，但有时确实是必须的，我们来了解下他们的工作方式：
- 在 vue 2.x 中，在一个元素上同时使用
v-if和v-for时，v-for会优先作用。 - 在 vue 3.x 中，
v-if总是优先于v-for生效。
对比学习
接下来我们通过一个简单的示例来感知下，假设我们想要实现一个极简的 todoList
我们有一个 todoList：
const todoList = [ { id: 0, task: '吃饭', done: true, }, { id: 1, task: '睡觉', done: false, }, { id: 2, task: '洗澡', done: true, }, // ..., ];
在 vue2 中， v-for 优先级高于 v-if ，我们可以这样实现：
<ul> <!-- vue2中，v-for优先级高于v-if --><li> <span>{{ite<strong style="color:transparent">本文来源gao@daima#com搞(%代@#码网@</strong>m.task}}</span></li></ul><ul> <li> <span>{{item.task}}</span></li></ul>
在 vue3 中，由于 v-if 优先级要高于 v-for ，所以不能像 vue2 那样将 v-for 和 v-if 放在同一个元素上，我们在 li 外面套一层用来执行 for 循环：
<ul> <li> <span>{{item.task}}</span></li></ul><ul> <li> <span>{{item.task}}</span></li></ul>
可以看出，如果在 vue2.x 中 v-if 和 v-for 在同一个元素上使用是无法直接在 vue3.x 中兼容的。
最佳实践
针对 v-if 和 v-for 的使用，其实官方是建议我们使用计算属性来处理的，这样既提高了性能，又可以兼容到 vue3.x，接下来我们看看计算属性实现方式：
模板部分：
<div id="app"> <!-- 最佳实践 --><ul class="todo-list"> <li class="todo"> <span>{{item.task}}</span></li></ul><ul> <li class="finished"> <span>{{item.task}}</span></li></ul><p> show finished？ {{showFinished ? 'yes' : 'no'}} </p></div>
js 部分：
// vue3.x Vue.createApp({ data() { return { msg: 'Todo List', showFinished: true, list: todoList, }; }, computed: { finished() { return todoList.filter(t => t.done); }, todos() { return todoList.filter(t => !t.done); }, }, }).mount('#app'); // vue2.x new Vue({ el: '#app', data() { return { msg: 'Todo List', showFinished: true, list: todoList, }; }, computed: { finished() { return todoList.filter(t => t.done); }, todos() { return todoList.filter(t => !t.done); }, }, });
点击查看： vue3示例 、vue2示例
总结
- vue2.x 中
v-for优先级高于v-if，vue3.x 相反； - 尽量避免在同一个元素上面同时使用
v-if和v-for，建议使用计算属性替代。
到此这篇关于vue2和vue3的v-if与v-for优先级对比学习的文章就介绍到这了,更多相关v-if与v-for优先级内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是vue2和vue3的v-if与v-for优先级对比学习的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue2和vue3的v-if与v-for优先级对比学习
转载请注明原文链接：vue2和vue3的v-if与v-for优先级对比学习
