实现简单的数据响应式

顶住

于 2021-12-12 14:42:31 发布

阅读量451

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44860376/article/details/121858672

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单模拟数据响应式原理</title>
</head>

<body>
    <div id="num"></div>
    <button id="btn">加1</button>
    <script>
        const data = {
            num: 1,
            // 简单模拟，以下先不做考虑
            // date: '',
            // type: {
            //     num: ''
            // }
        };

        // 更新页面
        function updateView() {
            document.querySelector('#num').innerHTML = data.num;
        }

        updateView();

        // 赋值，用来读取数据
        let num = data.num;

        // 监听num变化,更新视图
        Object.defineProperty(data, 'num', {
            get() {
                return num;
            },
            set(val) {
                num = val;
                // 更新页面
                updateView();
            }
        });

        document.querySelector('#btn').addEventListener('click', function () {
            data.num++; // 数据发生变化了，触发了set方法
        })
    </script>

    <style>
        button {
            margin-top: 100px;
        }
    </style>
</body>

</html>