手写一个简易Vue_手写vue

一、介绍

作为一个前端菜鸟来说，Vue框架其实还算是蛮复杂的，所以决定先通过渐进式的方式实现一个最基础的Vue响应式功能，Vue其实基础功能简单来说就以下几点：

• 负责结构初始化的参数（选项）
• 负责把data中的属性注入到Vue实例，转化成getter、setter
• 负责调用observer监听data中的所有属性的变化
• 负责调用compiler解析指令、插值表达式

目前的todoList：

• 指令解析
  • v-text
  • v-html
  • v-model
  • v-on
• 插值表达式 { {}}
• 双向绑定
• 响应式数据处理

二、前置知识

1、观察者模式

观察者模式就是当一个对象（目标）被修改时，则会自动通知依赖它的对象（观察者）。

所以我们可以分别给两者定义一个类，实现一些模式方法：

• 观察者（订阅者） - Watcher
  • update()：当事件发生时，具体要做的事情
• 目标（发布者） - Dep
  • subs数组：存储所有的观察者
  • addSub()：添加观察者
  • notify()：【通知】当事件发生时，调用所有观察者的update()方法

2、手写观察者模式

// 发布者-目标
class Dep {
   
    constructor () {
   
        // 记录所有的订阅者
        this.subs = []
    }
    // 添加订阅者
    addSub (sub) {
   
        if (sub && sub.update) {
   
            this.subs.push(sub)
        }
    }
    // 发布通知，依次调用每个观察者的update()方法【通知】
    notify () {
   
        this.subs.forEach(sub => {
   
            sub.update()
        })
    }
}
// 订阅者-观察者
class Watcher {
   
    update () {
   
        console.log('update')
    }
}

// 测试
let dep = new Dep()			// 目标（发布者）
let watcher = new Watcher()	// 观察者（订阅者）

dep.addSub(watcher)		// 订阅

dep.notify()			// 通知
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

三、简易版Vue整体结构

其中整体结构可以按类进行划分，每一块单独定义一个JS文件，实现它所负责的功能：

Vue

结构：

• $options：选项
• $el：挂载DOM
• $data：响应式数据
• _proxyData()：转化data，注入到Vue实例中

class Vue {
   
    constructor(options){
   
        // 1、通过属性保存选项的数据，默认为空对象
        this.$options = options || {
   }
        this.$data = options.data || {
   }
        // 绑定DOM对象（字符串则通过DOM查询获取DOM）
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
        // 2、把data中的成员转化为getter和setter，注入到vue实例中
        this._proxyData(this.$data)
        // 3、调用observe对象，监听数据的变化
        new Observer(this.$data)
        // 4、调用compiler解析指令、插值表达式
        new Compiler(
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16