# miniVue

**Repository Path**: yindj/mini

## Basic Information

- **Project Name**: miniVue
- **Description**: 简化版的Vue，实现了响应式原理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-09-10
- **Last Updated**: 2022-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 迷你版Vue
- > vm实例挂载数据
- > Observer 实现数据劫持
- > compiler 模板编译
- > Dep 观察者模式中的被观察者
- > Watcher 观察者模式中的观察者

# 视图更新
![Image text](/assets/01.png)
![Image text](/assets/02.png)
## Vue
### 1.记录传入的选项，设置$data和$el
### 2.把data成员注入到Vue实例
### 3.负责调用Observer实现数据响应式处理（数据劫持）
### 4.负责调用Compiler编译指令/插值表达式等
## Observer
### 1. 数据劫持
#### （1）.负责把data中的成员转换成getter/setter
#### (2).负责把多层属性转换成 getter/setter
#### （3.如果给属性赋值为新对象，把新对象的成员设置为 getter/setter
### 2.添加 Dep 和 Watcher 的依赖关系
### 3.数据变化发送通知
## Compiler
### 1.负责编译模板，解析指令/插值表达式
### 2.负责页面的首次渲染过程
### 3.当数据变化后重新渲染
## Dep
### 1.收集依赖，添加订阅者(watcher
### 2.通知所有订阅者
## Watcher
### 1.自身实例化的时候往dep对象中添加自己
### 2.当数据变化dep通知所有的 Watcher 实例更新视图