vue双向数据绑定实现原理（简单版）

最新推荐文章于 2024-04-03 18:31:21 发布

yuanyi正

最新推荐文章于 2024-04-03 18:31:21 发布

阅读量516

点赞数

分类专栏：学习笔记 vue js 文章标签： vue javascript js

本文链接：https://blog.csdn.net/yuan_618859/article/details/106895457

版权

js 同时被 3 个专栏收录

67 篇文章 1 订阅

订阅专栏

vue

49 篇文章 0 订阅

订阅专栏

学习笔记

2 篇文章 0 订阅

订阅专栏

vue双向数据绑定原理

利用了Object.defineProperty(obj,‘name’,{})
重新定义了对象，并对对象里面的所有属性的赋值和取值进行了监听

实现代码：运行一下就知道了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向数据绑定</title>
</head>
<body>
    <h3>双向数据绑定实现：</h3>
    <hr>
    <p>输入：<input type="text" id="ipt" /></p>
    <p>结果：<span id="text"></span></p>

    <script>
        // 页面加载获取对应的两个节点
        window.onload = function(){
            var ipt = document.getElementById('ipt');
            var text = document.getElementById('text');
            // 声明一个空对象，用于数据双向绑定
            var obj = {};
            // 页面加载--绑定初始值，并监听--等着被修改
            reactFun(obj,'asf')
            function reactFun(obj,val){
                // 重新定义该空对象，实现该对象的属性的监听
                Object.defineProperty(obj,'name',{
                    configurable: true,
                    enumerable: true,
                    get: function(){
                        console.log('get:123')
                        return val;
                    },
                    set: function(newVal){
                        console.log('set:');
                        // 重新赋值到上层作用域
                        val = newVal;
                    }
                });
            }
            
            // 对输入框绑定输入事件
            ipt.onkeyup = function(){
                // 当输入变化时，重新赋值给obj.name
                // 修改对象的值
                obj.name = event.target.value;
                // 取得对象的值，赋值给页面
                text.innerHTML = obj.name;
            }
        }
    </script>
</body>
</html>

yuanyi正

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue双向数据绑定实现原理（简单版）

vue双向数据绑定原理利用了Object.defineProperty(obj,‘name’,{})重新定义了对象，并对对象里面的所有属性的赋值和取值进行了监听实现代码：运行一下就知道了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
复制链接

扫一扫