vue 源码学习 01-响应式原理

//响应式系统  基本原理
    /*
    Object.defineProperty( obj, prop, descriptor )

        obj:目标对象·
        prop:需要操作的目标对象的属性名
        descriptor:描述符

    */

    //cb function  用来模拟视图更新  调用它即表示试图更新 
    function cb(val){
        //视图渲染
        console.log('视图更新了')
    }

    //defindReactive  function 该方法通过Object.defineProperty来实现对对象的响应式化
    /*
        入参是一个 obj(需要绑定的对象)、key(obj的某一个属性),val(具体的值
    */
    function defineReactive(obj,key,val){
        Object.defineProperty(obj,key,{
            enumerable:true,
            configurable:true,
            get:function(){
                return val
            },
            set:function(newVal){
                if(newVal === val)return
                cb(newVal)
            }
        })
    }

    //observer
    //该函数传入一个value(需要响应式化的对象) 通过变量将将每个属性进行defineReactive 处理
    function observer(value){
        if(!value || (typeof value !=='object')){
            return 
        }
        Object.keys(value).forEach( (key) => {
            defineReactive(value,key,value[key])
        })
    }


    //vue 
    class Vue{
        //vue 构造类
        constructor(options){
            this._data = options.data;
            observer(this._data)
        }
    }


    //最后  new vue()  执行

    let o = new Vue({
        data:{
            test:'wo  shi test'
        }
    })

    o._data.test = 'hello vue '
posted @ 2019-10-22 16:55  Tutao1995  阅读(121)  评论(0编辑  收藏  举报