你不可不知的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 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
JS中字符串trim()使用示例
May 26 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
vue如何判断dom的class
2018/04/26 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
跟老齐学Python之重回函数
2014/10/10 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python实时监控cpu小工具
2018/06/21 Python
Python面向对象类的继承实例详解
2018/06/27 Python
python程序封装为win32服务的方法
2021/03/07 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python执行精确的小数计算方法
2019/01/21 Python
python小程序实现刷票功能详解
2019/07/17 Python
python连接mongodb集群方法详解
2020/02/13 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
阿凡达观后感
2015/06/10 职场文书