# vue--click

**Repository Path**: hejf01/vue--click

## Basic Information

- **Project Name**: vue--click
- **Description**: No description available
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-18
- **Last Updated**: 2021-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 简单实现 @click 传递事件,梳理vue源码实现方式，
1. vue初始化的时候，将method中的方法代理到vue[key]的同时修饰了事件的回调函数.
通过 initState(), initMethods(), bind() 绑定了作用域
2. vue进入compile环节需要将该div变成ast(抽象语法树）。当编译到该div时经过核心函数genHandler(), 如果事件函数有修饰符。就处理完修饰符，添加修饰符对应的函数语句。再返回。这个过程还会单独对native修饰符做特殊处理。
3. compile完后自然就render
```
_c('div',{attrs:{"id":"test1"},
on:{"click":click1}},
[_v("click1")]),_v(" "),
_c('div',{attrs:{"id":"test2"},
on:{"click":function($event){$event.stopPropagation();click2($event)}}}
```
4. 虚拟dom --- > 真实dom的时候。会调用核心函数 add$1() 通过addEventListener绑定相应事件