# 简易vue核心框架

**Repository Path**: yuguoxy/vue-core

## Basic Information

- **Project Name**: 简易vue核心框架
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-01
- **Last Updated**: 2023-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简易版vue框架

### 1. vue介绍

> vue是构建用户界面的渐进式框架。所谓渐进式是指由浅入深，由简单到复杂的框架。它是以数据驱动和组件化的思想构建的。
>
> 如果你之前已经习惯了用jQuery操作DOM，学习Vue时请先抛开手动操作DOM的思维，因为Vue是数据驱动的，你无需手动操作DOM。
> 它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

### 2. 简易版本vue框架

这次带大家自己手动实现一个款简易版vue框架，实现其核心功能，体会数据驱动，双向数据绑定。将DOM和数据绑定起来，每当变更了数据，DOM也会相应地更新。view页面解析先完成如下功能

- 模板插值: {{  }}
- v-text指令
- v-model指令

### 3. 实现效果

![vue1089](./media/vue1089.gif)



### 4. 掌握技术

要手动完成以上功能，需要了解MVVM模式思想，vue框架核心流程。具体技术需撑握

1.  面向对象编程class类使用

2.  数据劫持

3.  观察者模式

4.  正则表达式

5.  递归遍历

   ....

1. mvvm模式-  模型 model视图view,视图模型viewModel

   model表示数据， view视图表示页面， 数据与页面通过视图模型viewModel连接。

   

   ![1651377905890](./media/1651377905890.png)

2. 流程图 - 通过流程图知道实现vue框架的几个核心类: Vue、Observer、Dep、Watcher、Compiler![1651377947542](./media/1651377947542.png)


### 5. 代码

1. Vue核心类
   1. 接收选项数据
   2. data注入Vue实例(供compiler使用)
   3. 调用Observer，实 现数据劫持
   4. 调用Compiler 解析指令与模板插值
2. Observer类
   1. 数据劫持,把 $data 中的成员转换成 getter/setter
   2. 初始化Dep
   3. 在 getter中添加依赖watcher
   4. 在setter中通知更新页面
3. Compiler类
   1. 负责解析指令/插值表达式
4. Watcher类
     更新页面 
     1. 每个节点对应一个Watcher
     2. 节点编译Compiler时实例化,实例保存到Dep观察中
5. Dep 类
   收集依赖watcher
    通知更新

###  6. 源码地址

https://gitee.com/yuguoxy/vue-core.git