Vue 数据双向绑定原理

最新推荐文章于 2025-05-08 11:21:44 发布

只想静静的

最新推荐文章于 2025-05-08 11:21:44 发布

阅读量192

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/zhouyuqin01/article/details/120444812

版权

本文介绍了数据劫持的概念，通过`Object.defineProperty`深入理解如何监听数据对象的属性变化。文章展示了如何使用`observe`函数遍历并定义响应式属性，以及`defineReactive`函数来设置数据的getter和setter，实现数据变化时的监听。同时，提到了订阅者模式，当数据变化时，所有依赖该数据的页面元素都能得到更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据劫持: 就是通过 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;

         }
        
    })
}