【vue.js】文档解读【day 3】

【vue.js】文档解读【day 3】 | 列表渲染

在这里插入图片描述

如果阅读有疑问的话，欢迎评论或私信！！

文章目录

列表渲染
- v-for
- v-for 与对象
- 在 `v-for` 里使用范围值
- `template` 上的 `v-for`
- v-for与v-if
- 通过key管理状态
- 组件上使用v-for
- 数组变化侦测

列表渲染

v-for

在我们想要渲染出一个数组中的元素时，在JavaScript中，我们可能会想到循环使用document.createElement创建标签，并且赋予变量值。

而vue中提供给了我们v-for指令，可以更方便快捷的渲染一个列表标签。v-for中的值需要使用item in items的语法，其中item是别名，也就是自命名的变量，用于在当前作用域中使用。而items是一个数组名。例如：

<template>
  <p v-for="myCustom in myArr" class="active">{{ myCustom }}</p>
</template>

<script>
export default {
  data() {
    var myArr  = [1,2,3,4,5,6,7,8,9,10]
    return {
      myArr
    };
  }
};
</script>

该代码渲染除了10个p标签，并且同时class等属性也会保存。

除此之外，我们可以使用v-for指令的第二个可选参数来使用数组中的索引值。例如：

<template>
  <p v-for="(myCustom,index) in myArr" class="active">{{ myCustom  }} - {{  	   index }}</p>
</template>

<script>
export default {
  data() {
    var myArr  = [1,2,3,4,5,6,7,8,9,10]
    return {
      myArr
    };
  }
};
</script>

在官方文档中有一句话：在 v-for 块中可以完整地访问父作用域内的属性和变量。也就是我们可以访问myArr的同胞属性，emm…这个应该本来是可以的吧，只要是这个实例中data返回的对象，都可以被插入到DOM中。这句话也可能是为了给下文嵌套v-for讲的。

在多层嵌套的v-for中，作用域的方式和多层嵌套for循环的方式比较像，父作用域无法访问子作用域，而子作用域可以方法父作用域。例如：

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

在vue文档中，提到可以使用of分隔符替代in，这个用法的意图可能是为了根据用户不同风格提供的，在JavaScript中，for-of用来遍历一个对象，来表示每个对象值，而for-in会返回索引值。具体怎么使用都可以，自己怎么喜欢怎么来。例如：

<div v-for="myCustom of myArr"></div>

v-for 与对象

v-for指令对数组和对象的使用方法类似，只是对于对象，第二个参数为对象的键，第三个参数才是目前迭代的位置索引。关于v-for对对象键的遍历，来源于ES6中Object原型上的keys方法所得到的数组。

例如：

<template>
  <p v-for="(myCustom,currentKey,currentIndex) in author" class="active">{{ myCustom  }} - {{  currentKey }} -  {{ currentIndex }}</p>
</template>

<script>
export default {
  data() {
   var author = {
      name: "John Doe",
      books: [
        "Vue 2 - Advanced Guide",
        "Vue 3 - Basic Guide",
        "Vue 4 - The Mystery",
      ],
    };
    return {
      author
    };
  }
};
</script>

输出效果：

John Doe - name - 0

[ “Vue 2 - Advanced Guide”, “Vue 3 - Basic Guide”, “Vue 4 - The Mystery” ] - books - 1

在 `v-for` 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

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

注意此处 n 的初值是从 1 开始而非 0。

`template` 上的 `v-for`

与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

v-for与v-if

在vue风格指南中有一句话：Never use v-if on the same element as v-for.

不要将v-if和v-for使用在同一个元素上

vue解释了下面两种情况：

如果你想要先过滤一个列表，然后决定列表中该元素是否显示，可以这样做：

<template>
  <ul v-for="currentValue in myArr">
    <li v-if="currentValue.isActive">{{ currentValue.myNumber }}</li>
  </ul>
</template>

<script>
export default {
  data() {
   var myArr  = [{
      myNumber:1,
      isActive:true
    },{
      myNumber:2,
      isActive:false
    },{
      myNumber:3,
      isActive:true
    },{
      myNumber:2,
      isActive:false
    }]
    return {
      myArr
    };
  }
};
</script>

控制台输出：1 3

如果你想要先决定是否显示一个列表，然后再进行过滤，可以这样做：

<template>
  <ul v-if="showList" >
    <li v-for="currentValue in myArr">{{ currentValue.myNumber }}</li>
  </ul>
</template>

<script>
export default {
  data() {
   var showList = true;
   var myArr  = [{
      myNumber:1,
      isActive:true
    },{
      myNumber:2,
      isActive:false
    },{
      myNumber:3,
      isActive:true
    },{
      myNumber:2,
      isActive:false
    }]
    return {
      myArr,
      showList
    };
  }
};
</script>

控制台输出：1 2 3 4

通过key管理状态

我们知道vue是有自己的响应式系统，大部分数据都是有响应式的功能，那么v-for中的数据应该也有响应式功能。也就是在v-for中的数据发生改变时，渲染出的列表也应该直接更新。

对于v-for的更新策略，vue的默认策略是“就近更新”，也就是不变动DOM的渲染顺序，而是直接改变渲染值。

我们来看两组代码：

不带key

<template>
  <div >
      <p v-for=" (item,index) in keyTest" >{{ item.myName }} -------- <input 			type="text"></p>
      <button @click="add()">添加</button>
    </div>
</template>

<script>
export default {
  data() {
   var keyTest = [
      {
        id: 0,
        myName: 1,
      },
      {
        id: 1,
        myName: 2,
      },
      {
        id: 2,
        myName: 3,
      },
      {
        id: 3,
        myName: 4,
      },
      {
        id: 4,
        myName: 5,
      },
    ];
    return {
      keyTest
    };
  },
  methods: {
    add(){
      this.keyTest.unshift({id:10,myName:'新的'});
    }
    
  },
};
</script>

在这里插入图片描述

带key

<template>
  <div >
      <p v-for=" (item,index) in keyTest" >{{ item.myName }} -------- <input 			type="text"></p>
      <button @click="add()">添加</button>
    </div>
</template>

<script>
export default {
  data() {
   var keyTest = [
      {
        id: 0,
        myName: 1,
      },
      {
        id: 1,
        myName: 2,
      },
      {
        id: 2,
        myName: 3,
      },
      {
        id: 3,
        myName: 4,
      },
      {
        id: 4,
        myName: 5,
      },
    ];
    return {
      keyTest
    };
  },
  methods: {
    add(){
      this.keyTest.unshift({id:10,myName:'新的'});
    }
    
  },
};
</script>