JavaScript练习 - 数据监听和双向绑定-Object.defineProperty

全栈道

于 2024-04-10 07:40:14 发布

阅读量739

点赞数 29

文章标签： javascript vue.js 前端 elementui 开发语言

本文链接：https://blog.csdn.net/iotzzh/article/details/124817091

版权

本文详细解释了Vue中如何使用`Object.defineProperty`实现数据绑定，通过get和set拦截器模拟数据响应式，以及利用`input`事件监听更新input值并同步到output元素。

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

在使用vue时，我们在最初对数据响应式就会遇到一个概念，叫数据绑定。至于vue中怎么写的并不是很清楚，只是知道vue2里面利用object.defineProperty方式对get/set进行拦截。知道这个概念基本大概知道怎么去实现了。可能不对，只是在表象上进行一次模拟。
示例如下：

代码如下：

<!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>Document</title>
</head>

<body>
    <label>输入: </label><input class="input" /><br />
    <label>输出: </label><span class="output"></span><br />
    <label>输出: </label><span class="output"></span><br />
    <label>输出: </label><span class="output"></span><br />

    <script>
        window.viewModel = {};
        let input = document.querySelector('.input');
        let outputs = document.querySelectorAll('.output');

        Object.defineProperty(viewModel, 'inputValue', {
            enumerable: true,
            configurable: true,
            get: function () {
                return input.value;
            },
            set: function (value) {
                input.value = value;
                inputListener(value);
            }
        });

        const eventNames = ['input', 'change'];
        eventNames.forEach(eventName => {
            input.addEventListener(eventName, function (e) {
                window.viewModel.inputValue = e.target.value;
            });
        });

        inputListener = function (value) {
            outputs.forEach(output => {
                output.innerHTML = value;
            });
        }
    </script>

</body>

</html>

知识点

Object.defineProperty

给某一对象添加属性，并且可以设置get/set属性

input.addEventListener

给属性添加事件见监听

该实例利用拦截get/set方法，实现与output之间的数据绑定。

全栈道

关注

29
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript练习 - 数据监听和双向绑定-Object.defineProperty

在使用vue时，我们在最初对数据响应式就会遇到一个概念，叫数据绑定。至于vue中怎么写的并不是很清楚，只是知道vue2里面利用object.defineProperty方式对get/set进行拦截。知道这个概念基本大概知道怎么去实现了。可能不对，只是在表象上进行一次模拟。示例如下：代码如下：<!DOCTYPE html><html lang="en">...
复制链接

扫一扫