06 数组的变更,key的作用

1.在我们进行对数组操作的时候,对用一些数组方法对数组进行变更,总分为两种情况,对原始的数组进行操作,第二种返回新的数组。

2.列举一些简单的数组的变更的方法,即对原始的数组继续操作

push:在尾部进行添加
pop:在尾部进行删除
shift:在头部进行删除
unshift:在头部进行添加
splice:删除或者添加元素;
sort:数组的排序
reverse:数组的翻转

3.返回新的数组,如何进行处理?

案例:


​$set()

   解决方法1

   :用新数组覆盖以前的数组 

   var arr1= this.arr.slice(0,3);

     this.arr=arr1

   解决方法2,如果想改变里面的一个值,可以采用this.$set()方法

三个参数:

 参数1:原始数组

参数2: 要放入的位置(对应的索引号)

参数3: 要放入的值

例如:  this.$set(this.arr,0,99)  将数组中索引为1的值改成99;

4.v-for跟新时,是如何操作DOM的?

1.定义: 虚拟DOM,保存在内存中是一个js的对象,保存的是节点的信息。

          2.操作的结果:循环出新的虚拟DOM结构,和旧的虚拟DOM结构对比,尝试复用标签就地跟新内容

虚拟DOM好处?

提高DOM更新的性能,不频繁操作真实DOM,在内存中找到变化部分,在更新真实DOM(找补丁)

5.diff算法

1.根元素比较

     1.比较根元素,如果改变了,删除重新建立根元素标签

     2.根元素不变,属性改变,就会添加一重新构建的虚拟DOM多出的属性 

2.如果标签内子标签/内容改变,diff算法是如何对比的?(同级比较 )

    首先判断有没有key的值?        

    1.无key,就地跟新,有key按照key比较

     2.key,值唯一的不重复的字符串或数字

    3. 拿索引号当key值的作用,不会起到按key值进行比较的效果

    答:因为索引是随机的。加它的作用是为了防止出现波浪线

3.key应该怎么用?

 如果是对象的话,尽量采取id做为key的值 ,无id就用索引

4.key的好处?

可以配合虚拟DOM提高跟新的性能

5.无key值的图解

 

6.有key值,索引当key值

还是就地更新

 

7.有key - 值为id

 

7.动态绑定class和动态绑定style

语法   :class="{类名:布尔值}"

语法   :style="{样式:变量的值}"

おすすめ

転載: blog.csdn.net/qq_59076775/article/details/120873349