响应式原理解析

//订阅器
function observe(data, cb){
    Object.keys(data).forEach((key) => {
        let val = data[key]
    	Object.defineProperty(data,key,{
        	enumerable:true,
            configurable:true,
            get: () => {
                console.log("read")
                return val
            },
            set: (newVal) =>{
				val = newVal
                cb()
            }
    	})                         
 	}) 
}
class Vue {
    constructor(options){
        this._data = options.data
        observe(this._data, options.cb)
    }
}
let app = new Vue({
    el:"#app",
    data:{
        text:"text",
        text2:"text2"
    },
    cb: function(){
        console.log('change')
    }
})

console.log(app._data.text)  // 先输出read，再输出text
app._data.text = '1' //输出change
console.log(app._data.text) //先输出read，再输出1

为了让读取跟修改更加方便，我们采用代理的形式对代码进行如下修改：

//订阅器
function observe(value, cb) {
    //通过that接收的this就是创建的实例，方便在下面的函数调用
    const that = this
    Object.keys(value).forEach((key) => 
        //使用that，下面绑定完get与set方法后，读取与修改可以直接使用对象+属性读取
        Object.defineProperty(that, key, {
            enumerable: true,
            configurable: true,
            get: ()=>{
                /*....依赖收集等....*/
                /*Github:https://github.com/answershuto*/
                console.log('read') 
                return value[key]
            },
            set:newVal=> {
                value[key] = newVal;
                cb();/*订阅者收到消息的回调*/
            }
        })
    )
}

//创建Vue实例的类
class Vue {
    constructor(options) {
        //通过call函数将订阅器的this对象指向创建的实例本身
        observe.call(this, options.data,options.render)
    }
}

let app = new Vue({
    el: '#app',
    data: {
        text: 'text',
        text2: 'text2'
    },
    render: function(){
        console.log("change");
    }
})
console.log(app.text) // 先输出read，再输出text
app.text = 1 //输出change
console.log(app.text) //先输出read，再输出1

这样一来我们就可以用app.text代替app._data.text了。