阅读 372
【快速入门Vue系列】第四篇:Vue的v-for列表高性能渲染,深入了解

【快速入门Vue系列】第四篇:Vue的v-for列表高性能渲染,深入了解

  • 本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

【文末抽奖】

列表渲染

利用v-for指令,基于数据多次渲染元素。

在v-for中使用数组

用法:(item, index) in items 参数: items: 源数据数组    

item:数组元素别名    

index:可选,索引 可以访问所有父作用域的属性

<ul id="app">
  <li v-for="(person, index) in persons">
    {{ index }}---{{ person.name }}---{{ person.age }}
  </li>
</ul>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    persons: [
      { name: '杉杉', age: 18 },
      { name: '思思', age: 20 },
      { name: '哥哥', age: 22 },
      { name: '小明', age: 88 },
    ]
  }
})
复制代码

可以利用of替代in作为分隔符,因为它更接近迭代器的语法:

<div v-for="item of items"></div>
复制代码

在v-for中使用对象

用法:(value, key, index) in Object 参数:value: 对象值            key:可选,键名            index:可选,索引

<ul id="app">
  <li v-for="(value, key, index) in shan">
    {{ value }}
  </li>
</ul>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    shan: {
      name: '杉',
      age: 18,
      height: '163cm'
    }
  }
})
复制代码

在v-for中使用数字

用法:n in num 参数:n: 数字,从1开始

<div>
  <span v-for="n in num">{{ n }} </span>
</div>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    num: 10
  }
})
复制代码

在v-for中使用字符串

用法:str in string 参数:str: 字符串,源数据字符串中的每一个

<div>
  <span v-for="str in string">{{ str }} </span>
</div>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    string: 'shanshan'
  }
})
复制代码

循环一段包含多个元素的内容

可以利用template元素循环渲染一段包含多个元素的内容

<ul id="app">
  <template v-for="person in persons">
    <li>{{ item.msg }}</li>
    <li>哈哈</li>
  </template>
</ul>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    persons: ['a', 'b', 'c', 'd']
  }
})
复制代码

关于key

Vue更新使用v-for渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是简单复用此处每个元素:

<ul id="app">
  <li v-for="(person, index) in persons">
    {{ person }}
    <input type="text" />
    <button @click="handleClick(index)">下移</button>
  </li>
</ul>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    persons: ['a', 'b', 'c', 'd']
  },
  methods: {
    handleClick (index) {
      const deleteItem = this.persons.splice(index, 1);
      this.persons.splice(index + 1, 0, ...deleteItem);
    }
  }
})
复制代码

在"就地复用"策略中,点击按钮,输入框不随文本一起下移,是因为输入框没有与数据绑定,所以vuejs默认使用已经渲染的dom,然而文本是与数据绑定的,所以文本被重新渲染。这种处理方式在vue中是默认的列表渲染策略,因为高效。

这个默认的模式是高效的,但是在更多的时候,我们并不需要这样去处理,所以,为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,我们需要为每项提供一个唯一key特性,Vue会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

key的使用方法

预期值:number | string 有相同父元素的子元素必须有独特的 key,重复的 key 会造成渲染错误,key应唯一。

<ul id="app">
  <li v-for="(person, index) in persons" :key="person">
    {{ person }}
  </li>
</ul>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    persons: ['杉杉', '思思', '哥哥', '小明']
  }
}) 
复制代码

不建议将数组的索引作为key值,如:

<li v-for="(person, index) in persons" :key="index">
  {{ person }}
</li>
复制代码

当改变数组时,页面会重新渲染,Vue会根据key值来判断要不要移动元素。例如当页面重新渲染时,key值为"杉杉"的元素为<li>杉杉</li>,页面重新渲染前,key值为"杉杉"的元素也为<li>杉杉</li>,那么Vue就会移动这个li元素,而不是重新生成一个元素。 当使用数组的索引作为key值时,页面重新渲染后,元素的key值会重新被赋值,例如我们将数组进行反转, 反转前:

元素key值
<li>杉杉</li>0
<li>思思</li>1
<li>哥哥</li>2
<li>小明</li>3

反转后:

元素key值
<li>小明</li>0
<li>哥哥</li>1
<li>思思</li>2
<li>杉杉</li>3

Vue会比对渲染前后拥有同样key的元素,发现有变动,就会再生成一个元素,如果用索引作key值得话,那么此时,所有的元素都会被重新生成。

那么key如何唯一的?

跟后台协作时,传回来的每一条数据都有一个id值,这个id就是唯一的,用id做key即可。

key不仅为v-for所有,它可以强制替换元素,而不是重复使用它:

<ul id="app">
  <button @click="show = !show">{{ show ? '显示' : '隐藏'}}</button>
  <input type="text" v-if="show" key="a" />
  <input type="text" v-else key="b" />
</ul>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    show: true
  }
}) 
复制代码

v-for 和 v-if 一同使用

永远不要把 v-if 和 v-for 同时用在同一个元素上。 当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,所以这个模板:

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
复制代码

将会经过如下运算:

this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})
复制代码

因此哪怕我们只渲染出一小部分用户的元素,也得在每次重新渲染的时候遍历整个列表,不论活跃用户是否发生了变化。 所以以下两种场景,我们可以做出如下处理:

  1. 为了过滤一个列表中的项目。
<ul id="app">
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'a', isActive: true, id: 1},
      { name: 'b', isActive: false, id: 2},
      { name: 'ct', isActive: false, id: 3},
      { name: 'd', isActive: true, id: 4},
    ]
  }
})
复制代码

可以把上面的代码更新为:

 <!-- 通过原来的数组,得到一个新数组,渲染这个新的数组 --> 
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'a', isActive: true, id: 1},
      { name: 'b', isActive: false, id: 2},
      { name: 'c', isActive: false, id: 3},
      { name: 'd', isActive: true, id: 4},
    ],
    activeUsers: []
  }
})
vm.activeUsers = vm.users.filter(user => user.isActive);
复制代码

这种方式仅为演示,在日后学习完计算属性后,要利用计算属性来做。

  1. 为了避免渲染本应该被隐藏的列表
<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
复制代码
const vm = new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'a', isActive: true, id: 1},
      { name: 'b', isActive: false, id: 2},
      { name: 'c', isActive: false, id: 3},
      { name: 'd', isActive: true, id: 4},
    ],
    shouldShowUsers: false
  }
})
复制代码

html部分可替换成为:

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
复制代码

将 v-if 置于外层元素上,我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是,我们只检查它一次,且不会在 shouldShowUsers 为否的时候运算 v-for。

练习_仿淘宝商品筛选

css文件联系博主获取文件,所需数据:

goodsList: [
  {
    title: '上装',
    typeList: ['全部', '针织衫', '毛呢外套', 'T恤', '羽绒服', '棉衣', '卫衣', '风衣' ],
    id: 1,
  },
  {
    title: '裤装',
    typeList: ['全部', '牛仔裤', '小脚/铅笔裤', '休闲裤' ,'打底裤', '哈伦裤'],
    id: 2,
  },
  {
    title: '裙装',
    typeList: ['全部', '连衣裙', '半身裙', '长袖连衣裙', '中长款连衣裙'],
    id: 3,
  }
]
复制代码

练习_todoList

联系博主获取练习文件~

最后 

如果对您有帮助,希望能给个👍评论收藏三连!

博主为人老实,无偿解答问题哦❤

欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边实物,抽奖详情见活动文章,小伙伴讨论起来了!!

文章分类
前端
文章标签