Vue数据双向绑定的原理(源码简单实现)

最新推荐文章于 2024-02-10 11:24:33 发布

小谭同学ya

最新推荐文章于 2024-02-10 11:24:33 发布

阅读量228

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/TX9271000911/article/details/125774085

版权

小编我知道一提到Vue数据双向绑定的原理大家的第一反应应该就是通过object.defineProperty进行数据劫持，再通过发布者-订阅者模式模式实现，但实现出来就没有头绪，下面是小编简单实现的数据双向绑定，全面一点的过段时间再出

<!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>
    <!-- vue数据双向绑定是通过数据劫持结合"发布者-订阅者模式"的方式来实现 -->
    <div id="app">
        <div id="showbox"></div>
        <input type="text" id="myinput">
    </div>
    <script>
        // 数据 
        let data = {
            msg: '小花'
        }
        // let vm = new Vue({
        //     el:'#app',
        //     data:{

        //     }
        // })
        let vm = {}//实例
        Object.defineProperty(vm, 'msg', {
            configurable: true,//允许删除
            enumerable: true,//是否允许被遍历
            get() {
                console.log('get.....');
                return data.msg
            },
            set(val) {
                // 数据劫持
                console.log("set...", val);
                data.msg = val
                // 根据dom显示[订阅者]
                document.querySelector('#showbox').innerHTML= data.msg;
            }
        })
        // 初始化 将msg值显示到dom中
        // [两个订阅者]
        document.querySelector('#showbox').innerHTML = vm.msg
        document.querySelector('#myinput').value = vm.msg
        // input改变事件
        document.querySelector("#myinput").addEventListener("input",e=>{
            // [发布者]
            vm.msg = e.target.value
        })
    </script>
</body>

</html>

小谭同学ya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue数据双向绑定的原理(源码简单实现)

小编我知道一提到Vue数据双向绑定的原理大家的第一反应应该就是通过object.defineProperty进行数据劫持，再通过发布者-订阅者模式模式实现，但实现出来就没有头绪，下面是小编简单实现的数据双向绑定，全面一点的过段时间再出...
复制链接

扫一扫