# vue2-vif-vshow-resource-demo

**Repository Path**: kevinleeeee/vue2-vif-vshow-resource-demo

## Basic Information

- **Project Name**: vue2-vif-vshow-resource-demo
- **Description**: ## `v-if/v-show`

简单实现一个`vue2.x`版本的`v-if/v-show/@click`
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-03
- **Last Updated**: 2022-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## `v-if/v-show`

简单实现一个`vue2.x`版本的`v-if/v-show/@click`





***问题：如何实现`v-if/v-show`?***

1. 数据代理实现访问`data`数据
2. 数据劫持
3. 初始化dom数据使`v-if/v-show/@click`和dom绑定在一起
4. 初始化视图，根据`data`数据先初始化时候显示视图组件
5. 根据事件池去做时间处理函数的循环绑定
6. 改变数据的同时改变dom视图



***问题：为什么初始化dom时绑定`v-if/v-show/@click`?***

在执行`methods`对象里的方法时才能找到视图相应的节点去更改它的视图



***问题：`vue`在初始化dom时做了什么操作？***

1. 转化为AST树
2. 转化为虚拟节点
3. 转化为真实节点
4. 将数据和真实节点保存在一起



***问题：此轮子中，如何将`v-if/v-show/@click`和视图绑定在一起？***

定义池子保存当前的节点和`v-if/v-show/@click`属性

```
/**
 * showPool: [
 *   [
 *     dom,
 *     {
 *       //如果是if则需要增删节点
 *       type: if / show,
 *       //如果是show则需要显示或隐藏
 *       show: true / false,
 *       data: 绑定的数据
 *     }
 *   ]
 * ]
 */
 
 /**
 * console.log(this.showPool);
 * Map(4) {
 *   div.box.box1 => {
 *     key: div.box.box1,
 *     value: {type: 'if', show: false, data: 'boxShow1'}
 *   },
 *   div.box.box2 => {…},
 *   div.box.box3 => {…},
 *   div.box.box4 => {…}
 * }
 */
```

```
/**
 * eventPool: [
 *   [
 *     dom,
 *     handler
 *   ]
 * ]
 */
 
 /**
 * console.log(this.eventPool);
 * Map(4) {
 *   {
 *     key: button,
 *     value: ƒ showBox1()
 *   },
 *   button => ƒ,
 *   button => ƒ,
 *   button => ƒ
 * }
 */
```



***问题：当遇到`v-if`节点时，如何删除了之后恢复时保证位置不变？***

通过新增一个注释节点替换被删除的节点从而实现占位



源码地址：https://gitee.com/kevinleeeee/vue2-vif-vshow-resource-demo