# study_snabbdom

**Repository Path**: one_pic/study_snabbdom

## Basic Information

- **Project Name**: study_snabbdom
- **Description**: Vue源码解析之虚拟DOM和diff算法
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-19
- **Last Updated**: 2021-10-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue源码-虚拟dom

## README

# Vue源码解析之虚拟DOM和diff算法

## 环境搭建
1. 安装snabbdom
```sh
npm i -S snabbdom
```
2. 安装webpack
```sh
npm install -D webpack webpack-cli webpack-dev-server
```

3. webpack配置
```javascript
const path = require('path');

module.exports = {
    // 环境
    mode: 'none',
    // 入口
    entry: './src/index.js',
    // 出口
    output: {
        // 虚拟路径，不会真实生成
        publicPath: '/xuni/',
        // 打包出的文件名
        filename: 'bundle.js',
    },
    devServer: {
        // 端口号
        port: 8080,
        // 静态资源文件夹
        static: {
            directory: 'www'
        },
    }
};
```

## 虚拟dom和h函数
diff算法是发生在虚拟dom上的

## 手写h函数
简写h函数  
形态1 h('div',{},'文字')  
形态2 h('div',{},[])  
形态3 h('div',{},h())  

## 感受diff算法
dom节点改变时，会对虚拟节点进行精细化比较，然后保留同一节点中不变的部分  
如何定义是同一个虚拟节点：选择器相同且key相同  
只进行同层比较，不会进行跨层比较  

## 经典的diff算法优化策略
1. 新前与旧前
2. 新后与旧后
3. 新后与旧前
4. 新前与旧后  

从上至下进行命中查找，命中一条就停止查找，进行下一轮查找  
如果四条都没有命中，就需要用循环来查找了  
命中前指针下移，命中后指针上移  
while(新前<=新后 && 旧前<=旧后)  
如果新节点先循环完毕，老节点中还有剩余的节点说明他们是要被删除的节点  
如果旧节点先循环完毕，说明新节点中有要插入的节点  
如果命中第【3】条新后旧前，需要移动旧前指向的节点到旧后的后面  
如果命中第【4】条新前旧后，需要移动旧后指向的节点到旧前的前面