简易版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. 实现效果

4. 掌握技术

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

1. 面向对象编程class类使用
2. 数据劫持
3. 观察者模式
4. 正则表达式
5. 递归遍历
….

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

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

流程图 – 通过流程图知道实现vue框架的几个核心类: Vue、Observer、Dep、Watcher、Compiler

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

7. 代码图示

转载请注明来源：简易版vue框架

本文链接地址：http://www.yuguoxy.com/geekhome/?p=3338