vue基本响应式原理

//模拟数据更新之后的操作
function cb (val) {
    /* 渲染视图 */
    console.log("视图更新啦～");
}

使用了Object.defineReactive的方法:mdn

function defineReactive (obj, key, val) {
    Object.defineProperty(obj, key, {
        enumerable: true,       /* 属性可枚举 */
        configurable: true,     /* 属性可被修改或删除 */
        get: function reactiveGetter () {
            return val;         /* 实际上会依赖收集，下一小节会讲 */
        },
        set: function reactiveSetter (newVal) {
            if (newVal === val) return;
            cb(newVal);
        }
    });
}

将目标对象所有属性进行监听

function observer (value) {
    if (!value || (typeof value !== 'object')) {
        return;
    }
    
    Object.keys(value).forEach((key) => {
        defineReactive(value, key, value[key]);
    });
}

/*
class Test{
constructor(options){
console.log(options)//options为new的时候传入的参数
}
}
a=new Test({
data:{test:'我是你爹'},
watch:{userid:function(){}},
created:function(){
console.log('created')
}
})
{data: {…}, watch: {…}, created: ƒ}
*/
class Vue {
    /* Vue构造类 */
    constructor(options) {
        this._data = options.data;
        observer(this._data);
    }
}
let o = new Vue({
    data: {
        test: "I am test."
    }
});
o._data.test = "hello,world.";  /* 视图更新啦～ */

参考1:染陌老师