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 '