实现迷你版vue2的响应式核心原理代码

vue2 的响应式核心原理代码 其实就只有几个模块

1. 代理 Object.defineProperty

2.依赖收集dep,收集所有监听页面数据的watcher实例

3. 监听页面数据实例 watcher

4.观察者 Observer ，实现数据劫持 

5.编译模块 Compiler

下面来简单实现一下各个模块代码,新建index.js文件

1.首先简单实现Vue类，和基本代理功能

export class Vue{
    constructor(options = {}){
        this.$options = options
        this.$el = typeof options.el ==='string' ? document.querySelector(options.el):options.el
        this.$data = options.data
        this.$methods = options.methods

        this.proxy(this.$data)

        //observer 拦截 this.$data
        new Observer(this.$data)

        new Compiler(this)
    }
    //代理一下，this.$data.xx=>this.xx
    proxy(data){
        Object.keys(data).forEach(key=>{
            Object.defineProperty(this,key,{
                enumerable:true,
                configurable:true,
                get(){
                    return data[key]
                },
                set(newValue){
                    console.log(newValue)
                    if(data[key] === newValue || (Number.isNaN(data[key]) && Number.isNaN(newValue)) ) return
                    data[key] = newValue
                }
            })
        })
    }

}

 2.Dep依赖收集模块，收集所有watcher实例

class Dep{
    constructor(){
        this.deps = new Set()
    }
    //手机副作用代码，count
    add(dep){
        console.log("dep")
        console.log(dep)
        if(dep && dep.update) this.deps.add(dep)
    }
    notify