# vue-SourceCode

**Repository Path**: madeliness/vue-SourceCode

## Basic Information

- **Project Name**: vue-SourceCode
- **Description**: vue2源码研究相关代码
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-07-21
- **Last Updated**: 2025-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vuex

## README

# vue-SourceCode

#### 介绍
vue源码研究相关代码，本仓库基于vue2源码拆分与重写，旨在深度理解vue的整个响应式双向数据绑定的思想以及实现思路。

#### 软件架构
1. study-ast：vue的重要组成部分，通过栈的数据结构及思想实现ast-抽象语法树，将模板字符串拆分成一个tokens数组并返回。
2. study-data-reactive：数据响应式的实现思路及具体内容，包含Observer 类（将一个正常的object转换为每个层级的属性都是响应式（可以被侦测的）的object），Dep类（添加订阅，添加依赖，通知更新），Watcher观察者类（对于依赖收集的处理），defineReactive方法遍历数据的可枚举属性，利用Object.defineProperty中的get(),set()重写属性方法，实现数据响应式。
3.  study-directive：V-model的实现思路及代码示例，相比study-data-reactive添加了Compile模板编译类，重写了array的7个方法，结合vue实现模板编译实现v-model指令功能。
4.  studySnabbdom：虚拟dom渲染成真实dom的具体实现过程，包含diff算法新旧节点双端对比的实现思路和h函数渲染过程。
5.  templateEngine：编译模板解析的实现，比如一个包含响应式变量的`<div>${变量}</div>`的编译解析过程，在render渲染函数里边先调用parseTempToToken函数，让模板字符串变成tokens数组，然后再调用renderTemplate函数，让tokens数组变为dom字符串，最终能够插入到页面真实dom中。


#### 安装教程

1.  每个目录下的代码都可独立运行


#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)