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 相关文章推荐
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
如何手写简易的 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
重料打造自己的“宝马”---第三代
2021/03/02 无线电
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
js实现简单页面全屏
2019/09/17 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python爬取网页转换为PDF文件
2018/06/07 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
环卫工人先进事迹材料
2014/06/02 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
经营场所证明范本
2015/06/19 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python