你不可不知的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 相关文章推荐
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 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
海贼王:最美的悬赏令!
2020/03/02 日漫
php 正则 过滤html 的超链接
2009/06/02 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
python 常用的基础函数
2018/07/10 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
遥感技术与仪器求职信
2014/02/22 职场文书
员工生日会策划方案
2014/06/14 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
java代码实现空间切割
2022/01/18 Java/Android
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android