vue2和vue3的v-if与v-for优先级对比学习


Posted in Javascript onOctober 10, 2020

Vue.js 中使用最多的两个指令就是 v-ifv-for ,因此我们可能会想要同时使用它们。虽然官方不建议这样做,但有时确实是必须的,我们来了解下他们的工作方式:

  • 在 vue 2.x 中,在一个元素上同时使用 v-ifv-for 时, v-for 会优先作用。
  • 在 vue 3.x 中, v-if 总是优先于 v-for 生效。

对比学习

接下来我们通过一个简单的示例来感知下,假设我们想要实现一个极简的 todoList 效果:

vue2和vue3的v-if与v-for优先级对比学习

我们有一个 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 v-for="item in todoList" v-if="!item.done" :class="{todo: !item.done}" :key="item.id">
 <span>{{item.task}}</span>
 </li>
</ul>

<ul>
 <li v-for="item in todoList" v-if="item.done" :class="{finished: item.done}" :key="item.id">
 <span>{{item.task}}</span>
 </li>
</ul>

在 vue3 中,由于 v-if 优先级要高于 v-for ,所以不能像 vue2 那样将 v-forv-if 放在同一个元素上,我们在 li 外面套一层用来执行 for 循环:

<ul>
 <template v-for="item in list" :key="item.id">
 <li v-if="!item.done" :class="{todo: !item.done}">
  <span>{{item.task}}</span>
 </li>
 </template>
</ul>
<ul>
 <template v-for="item in list" :key="item.id">
 <li v-if="item.done" :class="{finished: item.done}">
  <span>{{item.task}}</span>
 </li>
 </template>
</ul>

可以看出,如果在 vue2.x 中 v-ifv-for 在同一个元素上使用是无法直接在 vue3.x 中兼容的。

最佳实践

针对 v-ifv-for 的使用,其实官方是建议我们使用计算属性来处理的,这样既提高了性能,又可以兼容到 vue3.x,接下来我们看看计算属性实现方式:

模板部分:

<div id="app">
 <!-- 最佳实践 -->
 <ul class="todo-list">
 <li v-for="item in todos" class="todo" :key="item.id">
  <span>{{item.task}}</span>
 </li>
 </ul>

 <ul v-if="showFinished">
 <li v-for="item in finished" :key="item.id" class="finished">
  <span>{{item.task}}</span>
 </li>
 </ul>

 <p>
 show finished?
 <input type="checkbox" v-model="showFinished" />
 {{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示例

总结

  1. vue2.x 中 v-for 优先级高于 v-if ,vue3.x 相反;
  2. 尽量避免在同一个元素上面同时使用 v-ifv-for ,建议使用计算属性替代。

到此这篇关于vue2和vue3的v-if与v-for优先级对比学习的文章就介绍到这了,更多相关v-if与v-for优先级内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
如何手写简易的 Vue Router
Oct 10 #Javascript
如何手写一个简易的 Vuex
Oct 10 #Javascript
echarts实现晶体球面投影的实例教程
Oct 10 #Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 #Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 #Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 #Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
You might like
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python format 格式化输出方法
2018/07/16 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
护士实习自我鉴定
2013/10/22 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
ktv好的活动方案
2014/08/15 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
Python Django项目和应用的创建详解
2021/11/27 Python