简单写一个MVVM的实现

最新推荐文章于 2025-05-28 08:01:52 发布

weixin_33862041

最新推荐文章于 2025-05-28 08:01:52 发布

阅读量323

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bf7ab4ce51d45507630959b

本文详细介绍了如何使用ES6的Object.defineProperty实现观察者模式，通过递归方式对多层级对象进行属性监听，确保数据变化时能及时响应。

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

观察者：对象用的语法：Object.defineProperty 实现方式：递归

defineProperty是es6新的对象属性，主要是观察对象中某个属性的值是否发生变化。

写一个简单的例子

let obj = {}val = newVal
let val = 3.14
Object.defineProperty(obj,'PI',{
    get(){
        return val
    }
    set(newVal){
        console.log("set")
        val = newVal
    }
})
复制代码

现在改变obj的中的PI值 obj.PI = 3.15 这时就会打印出"set"写入

假如现在有一个现成的对象，要怎么实现一个多层级的监听呢？

let obj = { name: { name: '张三' }, age: 2 };
复制代码

首先涉及到多层级监听，就会想到递归，还有循环。我们需要最终实现一个函数observer（obj）来实现监听

function observer(obj){
    if(obj != 'object'){
        return obj
    }
    for (let key in obj) {
        defineReactive(obj, key, obj[key]);
    }
}
function defineReactive(obj,key,value){
    //此处递归
    observer(value)
    Object.defineProperty(obj,key,{
        get(){
            return value
        }
        set(val){
            //处理数据重新定义后的工作
            setMessage()
            value=val
        }
    })
}
function setMessage(){
    console.log("数据更新了")
}
observer(obj)
复制代码