defineProperty监听数据的变化

最新推荐文章于 2023-03-10 17:45:13 发布

Lcyj9994399

最新推荐文章于 2023-03-10 17:45:13 发布

阅读量199

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Lcyj9994399/article/details/128614744

版权

该文章介绍了如何使用JavaScript实现数据的监听和响应式设计。通过`defineProperty`函数封装监听数据变化的方法，当对象的属性被访问或赋值时，能触发相应的操作。文章中展示了如何对对象及嵌套结构进行深度监听，并在数据改变时更新视图。

摘要由CSDN通过智能技术生成

// 监听的数据
let obj = {
    name: '铁蛋儿',
    age: 1,
    arr: ['张三', '李四', '王五'],
    job: {
        code: 'FE'
    }
}

// 封装监听数据变化的函数
function defineProperty(obj, key, val) {
    observer(val)
    Object.defineProperty(obj, key, {
        get() {
            // 读取方法
            console.log('读取', key, '成功')
            return val
        },
        set(newval) {
            // 赋值监听方法
            if (newval === val) return
            // 遍历监听数据的每一项 
            observer(newval)
            console.log('监听赋值成功', newval)
            val = newval
            // 可以执行渲染操作
        }
    })
}

function observer(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    for (const key in obj) {
        // 给对象中的每一项都设置响应式
        defineProperty(obj, key, obj[key])
    }
}

observer(obj)

obj.arr[3] = 1