你不可不知的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脚本函数库 方便开发
Oct 13 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
微信小程序实现音乐播放器
Nov 20 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中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP实现的简单日历类
2014/11/29 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
JavaScript之编码规范 推荐
2012/05/23 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
node.js中的require使用详解
2014/12/15 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
深入了解Python数据类型之列表
2016/06/24 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python 获取等间隔的数组实例
2019/07/04 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Python类继承和多态原理解析
2020/02/05 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Python datetime模块的使用示例
2021/02/02 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
STP的判定过程
2012/10/01 面试题
教学器材管理制度
2014/01/26 职场文书
五年级英语教学反思
2014/01/31 职场文书
校运会广播稿
2015/08/19 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS