Vue2列表渲染

v-for

1. 定义：用户展示列表数据
2. 语法：v-for="(item,index) in xxx" :key=“yyy” [或v-of]
3. 可遍历：数组、对象、字符串（用的很少）、具体数值（用的很少）

key的作用（key的内部原理）

1. 虚拟DOM中key的作用：
   key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2. 对比规则：
   (1).旧虚拟DOM中找到了与新虚拟相同的key:
   ①.若虚拟DOM中内容没变，直接使用之前的真实DOM
   ②.若虚拟DOM中内容变了，如生成新的真实DOM，随后替换掉之前的真实DOM。
   (2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到页面。
3. 用index作为key可能会引发的问题：
   (1)若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新——>界面效果没问题，但效率低。
   （2）如果结构中还包含输入类的DOM:会产生错误DOM更新——>界面有问题。
4. 开发中如何选择key?
   (1)最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
   (2)如果不存在对数据的逆向添加、逆序删除等破坏顺序操作，仅用于渲染列表用户展示，使用index作为key是没有问题的。
   key的作用：给节点做个标识，在界面中不进行显示key属性。
   将index设为key
   
   将id设为key
   

v-for使用案例

<div id="root">
	<button @click="add">添加</button>
	<ul>
		<li v-for="(item,index) in dataArr" :key="item.id">{{item.name}}<input/></li>
	</ul>
</div>
<script>
     const vm = new Vue({
         el:"#root",
         data:{
            dataArr:[
                {id:"001",name:"张三",age:18},
                {id:"002",name:"李四",age:19},
                {id:"003",name:"王五",age:20},
            ]
         },
         methods: {
             add(){
                 this.dataArr.unshift({id:"004",name:"赵六",age:21})
             }
         },
     })
 </script>

列表过滤使用案例

<div id="root">
	<input placeholder="请输入内容" v-model="searchCon" />
	<ul>
		<li v-for="(item,index) in dataArrFilter" :key="item.id">{{item.name}}</li>
	</ul>
</div>
<script>
const vm = new Vue({
    el: "#root",
    data: {
      searchCon: "",
      dataArr: [
        { id: "001", name: "温兆伦", age: 18 },
        { id: "002", name: "周杰伦", age: 19 },
        { id: "003", name: "周冬雨", age: 20 },
        { id: "004", name: "周冬梅", age: 20 },
      ],
      //   dataArrFilter: [],
    },
    /*watch: { 
      searchCon: {
        immediate: true,
        handler(val) {
          this.dataArrFilter = this.dataArr.filter((item) => {
            return item.name.indexOf(val) != -1;
          });
        },
      },
    },*/
    computed: {
      dataArrFilter() {
        return this.dataArr.filter((item) => {
          return item.name.indexOf(this.searchCon) != -1;
        });
      },
    },
  });
</script>

列表排序使用案例

<div id="root">
	<input placeholder="请输入内容" v-model="searchCon" />
	<button @click="sortType = 0">原顺序</button>
	<button @click="sortType = 1">升序</button>
	<button @click="sortType = 2">降序</button>
	<ul>
		<li v-for="(item,index) in dataArrFilter" :key="item.id">{{item.name}} {{item.age}}</li>
	</ul>
</div>
<script>
  const vm = new Vue({
    el: "#root",
    data: {
      searchCon: "",
      dataArr: [
        { id: "001", name: "温兆伦", age: 21 },
        { id: "002", name: "周杰伦", age: 20 },
        { id: "003", name: "周冬雨", age: 18 },
        { id: "004", name: "周冬梅", age: 19 },
      ],
      sortType: 0, //0原顺序 1升序 2降序
    },
    computed: {
      dataArrFilter() {
        const arr = this.dataArr.filter((item) => {
          return item.name.indexOf(this.searchCon) != -1;
        });
        if (this.sortType) {
          arr.sort((a, b) => {
            return this.sortType == 1 ? a.age - b.age : b.age - a.age;
          });
        }
        return arr;
      },
    },
  });
</script>