# vue2-native

**Repository Path**: wqhash/vue2-native

## Basic Information

- **Project Name**: vue2-native
- **Description**: vue2源码系列
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-11
- **Last Updated**: 2021-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


<span id="top">目录</span>

- [√ mustach模板原理 ](#mustach)
- [√ 虚拟Dom和diff算法](#vm-dom)

### <!-- ☞ mustach模板原理  -->

<h3 id="mustach">☞ mustach模板原理</h3>

---

-   **介绍**

    模板引擎是将数据变为视图的一种方式

    ![Image text](./imgs/mustache-tokens-dom.png)

    这么看tokens就是一个 `js的嵌套数组`


-   **流程**

    本质原理:

    1. 就是将 `模板字符串` 转为 `tokens`形式

    > 模板字符串转tokens需要用 Scanner扫描器处理,
    > 注意的是 {{ text }} 花括号和内容；
    >
    > 然后通过 nestTokens把扁平化的tokens转成嵌套形式
    >

    2. 再将`tokens`结合 `数据data` 解析为 `Dom字符串` 

    > 这里需要主要的是 tokens中类型的处理 `text,name,# ` 
    > 
    > 处理时提取了一个 `lookup`函数可以看下
    >
    >

    ![Image text](./imgs/mustache编译原理.png)


 
    
    




[▲ 回顶部](#top)


### <!-- ☞ 虚拟Dom和Diff算法  -->

<h3 id="vm-dom">☞ 虚拟Dom和diff算法</h3>

---

> 为什么要虚拟Dom?  - [深度剖析：如何实现一个 Virtual DOM 算法](#https://github.com/livoras/blog/issues/13) 
>
> Dom是很慢的，可以打印一个 `div` 元素会发现其中包括很多属性；
> 游览器标准就是这么设计的，所以如果需要操作Dom会很慢;
>  
> 相对Dom对象，原生js对象处理起来更快，而且简单。Dom树上的结构，
> 信息都可以用js对象表示;
>
> Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
> 可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：
> 既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存
> CPU（JS）只操作内存（Virtual DOM）
> 最后的时候再把变更写入硬盘（DOM）。
>


-   **介绍**

### 虚拟Dom:

    虚拟Dom的本质就是用js对象描述Dom的层次结构, Dom中的一切属性都在虚拟Dom中
    有相对应得属性;

![Image text](./imgs/虚拟Dom.png)

### Diff算法:

    diff算法是发生虚拟Dom之上的,新旧节点进行diff (精细化比较),
    算出如何最小量更新, 最后反映到真正的Dom上

-   **流程**