首页 > 编程语言> 文章详细

虚拟dom,diff算法,插槽,数组去重,数组排序整理

2021-10-31 23:04:14 阅读：220 来源： 互联网

标签：arr dom 插槽 startIndex 数组 diff true 节点

什么是虚拟dom

用js来描述元素与元素之间的关系 [父子兄弟]

目的：高效渲染以及快速更新

高效渲染和快速更新的手段是diff算法
diff算法
- Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。

diff 算法是⼀种通过同层的树节点进⾏⽐较的⾼效算法

其有两个特点：

⽐较只会在同层级进⾏, 不会跨层级⽐较
在diff⽐较的过程中，循环从两边向中间⽐较

diff 算法在很多场景下都有应⽤，在 vue 中，作⽤于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点⽐较

⼆、⽐较⽅式 diff 整体策略为：深度优先，同层⽐较

1. ⽐较只会在同层级进⾏, 不会跨层级比较

2. ⽐较的过程中，循环从两边向中间收拢

下⾯举个 vue 通过 diff 算法更新的例⼦：

新旧 VNode 节点如下图所示

第⼀次循环后，发现旧节点D与新节点D相同，直接复⽤旧节点D作为 diff 后的第⼀个真实节点，同时旧节点 endIndex 移动到C，新节点的 startIndex 移动到了c

第⼆次循环后，同样是旧节点的末尾和新节点的开头(都是 C)相同，同理， diff 后创建了 C 的真实节点插⼊到第⼀次创建的 B 节点后⾯。同时旧节点的 endIndex 移动到了 B，新节点的 startIndex 移动到了E

第三次循环中，发现E没有找到，这时候只能直接创建新的真实节点 E，插⼊到第⼆次创建的 C 节点之后。同时新节点的 startIndex 移动到了 A。旧节点的 startIndex 和 endIndex 都保持不动

第四次循环中，发现了新旧节点的开头(都是 A)相同，于是 diff 后创建了 A 的真实节点，插⼊到前⼀次创建的 E 节点后⾯。同时旧节点的 startIndex 移动到了 B，新节点的 startIndex 移动到了 B

第五次循环中，情形同第四次循环⼀样，因此 diff 后创建了 B 真实节点插⼊到前⼀次创建的 A 节点后⾯。同时旧节点的 startIndex 移动到了 C，新节点的 startIndex 移动到了 F

新节点的 startIndex 已经⼤于 endIndex 了，需要创建 newStartIdx 和 newEndIdx 之间的所有节点，也就是节点F，直接创建 F 节点对应的真实节点放到 B 节点后⾯

三、原理分析当数据发⽣改变时， set ⽅法会调⽤ Dep.notify 通知所有订阅者 Watcher ，订阅者就会调⽤ patch 给真实的 DOM 打补丁，更新相应的视图

插槽

什么是插槽

（在子组件中用<slot></slot>划出一块区域来显示父组件中的页面结构，显示的结构在父组件的子组件标签中设置就行）
插槽怎么显示数据

显示的结构在父组件的子组件标签中设置就行
插槽分为几种

默认插槽具名插槽作用域插槽
作用域插槽怎么用
- 在子组件<slot></slot>通过v-bind绑定一个属性，挂载变量
- ```
<slot name="content" v-bind:us="user"></slot>
```
  在父组件中子组件标签上通过v-slot:插槽名=“变量”来接受数据

数组去重

1、 ES6-set

var arr  = [1,1,'true','true',true,true,15,15,false,false, undefined,
undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}];
 
function arr_unique1(arr){
return  [...new Set(arr)];
//或者
//return  Array.from(new Set(arr));
}
arr_unique1(arr); // (13)[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

Map去重

function arr_unique2(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有该key值
      map .set(arr[i], true);
    } else {
      map .set(arr[i], false);   // 如果没有该key值
      array .push(arr[i]);
    }
  }
  return array ;
}

 console.log(arr_unique2(arr)); //(13) [1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

filter+indexOf

function arr_unique5(arr){
    return  arr.filter((val,index,item)=>{
    return item.indexOf(val) === index;
   });
}

arr_unique5(arr); // (12) [1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

数组排序

function MaoPaoSort(arr){
        for(var i = 0;i<arr.length-1;i++) {
            for(var j = 0;j<arr.length-i-1;j++){
                if(arr[j]>arr[j+1]){
                    //把大的数字放到后面
                    var str = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = str;
                }
            }
        }
    }
    var arr = [3,5,1,2,7,8,4,5,3,4];
    //console.log(arr);[3,5,1,2,7,8,4,5,3,4];
    MaoPaoSort(arr);
    //console.log(arr);[1, 2, 3, 3, 4, 4, 5, 5, 7, 8]

插队排序

function InsertSort(arr) {
  let len = arr.length;
  let preIndex, current;
  for (let i = 1; i < len; i++) {
    preIndex = i - 1;
    current = arr[i];
    while (preIndex >= 0 && current < arr[preIndex]) {
      arr[preIndex + 1] = arr[preIndex];
      preIndex--;
    }
    arr[preIndex + 1] = current;
  }
  return arr;
}
 
 
var arr = [3,5,7,1,4,56,12,78,25,0,9,8,42,37];
InsertSort(arr);

标签：arr,dom,插槽,startIndex,数组,diff,true,节点
来源： https://blog.csdn.net/A535366/article/details/121071624

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9