手写实现简易Vue框架（以v-model指令为例）

手写实现简易Vue框架（以v-model指令为例）

作为前端最火的框架之一，Vue是MVVM设计模式实现的典型代表，什么是MVVM呢？MVVM是Model-View-ViewModel的简写，M - 数据模型（Model），V - 视图层（View），VM - 视图模型（ViewModel），它本质上就是MVC 的改进版。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

mvvm 实现原理的可以用下图简略表示

前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel通过数据绑定负责把Model的数据同步到View显示出来，通过DOM事件监听负责把View的修改同步回Model。

vue采用数据劫持配合发布-订阅模式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时，发布消息给依赖收集器，去通知观察者，做出对应的回调函数去更新视图。
Vue作为绑定的入口，整合observer、compile和watcher三者，通过observer来监听model数据变化，通过compile来解析编译模版指令，最后利用watcher搭起observer和compile之间的通信桥梁，达到数据变化=>视图更新，视图交互变化=>model变更的双向绑定效果。

下面我们来实现上述流程

1.Vue类

class myVue{
   
    constructor(option){
   
        this.$data = option.data
        this.$el = document.querySelector(option.el)
        //1.数据代理
        this.proxyData()
        //2.数据劫持
        new observer(this.$data)
        //3.模版编译
        new compile(this) 
    }
    //数据代理
    proxyData() {
   
        for(const key in this.$data) {
   
            Object.defineProperty(this,key,{
   
                configurable: false,
                enumerable: true,
                get() {
   
                    return this.$data[key]
                },
                set(newVal) {
   
                    this.$data[key] = newVal
                }
            })
        }
    }

}

Vue类负责初始化,进行数据代理（用vue实例对象来代替data 对data中的数据进行操作）,并调用Observer类和Complier类,对数据进行劫持和解析

2.observer类

class observer{
   
    constructor(data) {
   
        this.oberve(data)
    }
    //劫持(监听)数据
    oberve(data) {
   
        const dependency = new dep()
        for(const key in data) {
   
            let val = data[key]
            Object.defineProperty(data, key, {
   
                enumerable: true,
                configurable: false,