Vue 数据双向绑定原理

本文主要是介绍Vue 数据双向绑定原理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

数据劫持:   就是通过 Object.defineProperty 去操作 数据的get和set

实现一个数据监听器Observer,能够对数据对象的所有属性进行监听

 监听的就是这个data

订阅者模式:一对多,data的一个数据变化,   页面上用到这个数据的地方 都更新

var data ={name: "zs"}

observe(data)

function observe(data){
    if(!data || typeof data !== Object){

        return  ;
    }

    Object.keys(data).forEach(funtion(key){

       defineReactive(data,key,data[key])


    })
}

function defineReactive(data,key,val){

    observe(val) //监听子属性

    Object.defineProperty(data,key,{
        
        enumerable:true,//可枚举
        
        configurable:false,//不能再define
        
        get:function(){
            
            return val;
        
        },
        
        set:function(newVal){

            console.log('监听到值变化了',newVal)

            val = newVal;

         }
        
    })
}

这篇关于Vue 数据双向绑定原理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！