你不可不知的Vue.js列表渲染详解


Posted in Javascript onOctober 01, 2019

介绍

用 v-for 把一个数组对应为页面上的一组元素

vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑。通常它会和 v-if 配合使用,达到我们所需要的处理逻辑。
v-for 的语法形式是 item in items,其中 items 就是我们要循环的数组,而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

我们都知道既然有循环那肯定少不了对索引的处理。v-for 指令给我们提供了可选的第二个参数,即当前项的索引。

<ul id="example-2">
 <li v-for="(item, index) in items">
 {{ parentMessage }} - {{ index }} - {{ item.message }}
 </li>
</ul>

index 就是那个当前索引了。

你也可以使用 of 替代 in 作为分隔符。

<div v-for="item of items"></div>

在 v-for 里使用对象

是哒,很明显 v-for 也可以用来遍历一个对象的属性。

<ul id="v-for-object" class="demo">
 <li v-for="value in object">
 {{ value }}
 </li>
</ul>

也可以提供第二个参数为 property 名称 (也就是键名)

<div v-for="(value, name) in object">
 {{ name }}: {{ value }}
</div>

还可以用第三个参数作为索引

<div v-for="(value, name, index) in object">
 {{ index }}. {{ name }}: {{ value }}
</div>

维护状态

敲黑板啦哈~

vuejs 为了维护循环列表的状态需要提供唯一的 key 属性。
这个唯一的 key 可以为我们提供列表元素状态的更新,避免重复渲染等优化页面的性能。

这个 key 很关键,并不推荐使用简单的索引作为 key 的值,因为会有造成重复渲染混乱的可能。

数组更新检测

咳咳~ 继续敲黑板

我们在写程序的时候,往往会有数据更新但是页面元素没有跟着对应变化的情况。

数组列表的更新检测 vue 为我们提供了一套解决方案,但是需要注意它们在使用的方式上是不同的。

变异方法

意思就是以下的数组处理方法可以触发视图上的更新。

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

需要注意的是它们处理的都是原始数组。也就是在原来的数组上增加删除或者排序操作。

非变异方法

数组也有一些方法不会改变原始数据,而是返回新的数组。

filter()
concat()
slice()

返回新的数组在页面更新渲染的性能大家不必担心,vue 已经为我们做好了重用工作。

需要注意,在有些情况 vue 无法检测数组变动的情况如下:

  1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength
var vm = new Vue({
 data: {
 items: ['a', 'b', 'c']
 }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决这类问题,官方提供了两种解决方案。

1、Vue.set

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

2、Array.prototype.splice

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

如果我们在处理数据无法更新视图的时候记得试试这个方法。

对象变更检测注意事项

对于对象属性的增加和删除,对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。

对于这个问题可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

v-for 还可以处理整数的循环

<div>
 <span v-for="n in 10">{{ n }} </span>
</div>

最后提醒使用 v-for 时一定要记得带上 key 哟!

神秘的 set

综上我们会知道 js 无法处理组件即时更新的都由 vue 提供的这个 set 方法接管。那么这个 set 有什么过人之处,可以完成组件与数据的绑定呢?

关键位置可以看 vue 源码的这里 github.com/vuejs/vue/b…

set 方法开始会有一些逻辑判断,对于数组的处理依然使用的是 splice 方法。

if (Array.isArray(target) && isValidArrayIndex(key)) {
 target.length = Math.max(target.length, key)
 target.splice(key, 1, val)
 return val
}

其余的就交给我们 vue 不支持的 IE8 ECMAScript5 特性 Object.defineProperty

Object.defineProperty(obj, key, {
 value: val,
 enumerable: !!enumerable,
 writable: true,
 configurable: true
})

下次我会对 Object.defineProperty 在做详细介绍,今天就到这了,晚安?。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
div移动 输入框不能输入的问题
Nov 19 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 #Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 #Javascript
javascript实现摄像头拍照预览
Sep 30 #Javascript
java和js实现的洗牌小程序
Sep 30 #Javascript
JS使用H5实现图片预览功能
Sep 30 #Javascript
在vue中使用jsx语法的使用方法
Sep 30 #Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 #Javascript
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
流动人口婚育证明范本
2014/09/26 职场文书
安全月宣传标语
2014/10/07 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
活动新闻稿范文
2015/07/17 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书