使用weakmap来收集响应式数据，数据变化执行函数

最新推荐文章于 2024-07-30 10:56:44 发布

SpringYoungYu

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量381

点赞数 8

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_44917015/article/details/135619152

版权

本文介绍了JavaScript中WeakMap和Map数据结构的使用，以及如何通过属性描述符劫持Map来实现对象属性的动态改变触发相关回调函数。

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

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">
</head>

<body>
</body>
<script>
    let obj1 = {
        name: 'o1',
        age: 1
    }
    let obj2 = {
        name: 'o2',
        age: 2
    }
    function f1name() {
        console.log('f1name');
    }
    function f2name() {
        console.log('f2name');
    }
    function f1age() {
        console.log('f1age');
    }
    function f2age() {
        console.log('f2age');
    }
    const weakmap1 = new WeakMap()
    const map1 = new Map();
    map1.set('name', [f1name, f2name])
    map1.set('age', [f1age, f2age])
    weakmap1.set(obj1, map1);
    let _name = obj1.name;
    Object.defineProperty(obj1, 'name', {
        configurable: true,
        enumerable: true,
        get: function () {
            return _name;
        },
        set:function(value){
            _name = value;
            weakmap1.get(obj1).get('name').forEach(fn=>fn())
        }
    })
    obj1.name = '22222'
</script>

</html>