[学习交流] vue双向数据绑定的原理

vue双向数据绑定的原理

面试回答：

vue 双向数据绑定的原理主要通过数据劫持 Object.defineProperty 和发布订阅模式实现的，通过 Object.defineProperty 监听数据发生变化然后通知订阅者（watcher），订阅者触发响应的回调利用了Object.defineProperty。

第一版：

第二版：

第三版：

最终代码：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" id="txt">
</div>
<script>
var obj = {};
// obj.msg = 'hello vue';//设置obj的msg的值 set
// console.log(obj.msg);//在获取obj的msg的值 get 
var value = 'hello vue';
var txt = document.querySelector('#txt');
txt.value = value;
//数据变了 视图会跟着变
Object.defineProperty(obj,'msg',{
//获取
get:function(){
console.log('有人访问了我');
return value;
}, //设置
set:function(abc){
console.log('有人设置了我')
value = abc;
txt.value = abc;
}
})
//视图变了 数据也跟着变
txt.oninput = function(){
value = this.value;
}
</script>
</body>
</html>

上面利用Object.defineProperty我们实现了双向数据绑定，接下来，我们data中的数据变了的时候，页面中一堆地方都可以实现实时的响应变化，这块用到了发布订阅模式来实现

就和用户订阅微信公众号道理一样，一个公众号可以被多个用户同时订阅，当公众号有新增内容时候，只要发布就好了，用户就能接收到最新的内容。

[HTML] 纯文本查看 复制代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        function GongZhongHao(title){
            this.title = title 
            this.clients = []
        }

        GongZhongHao.prototype.fabu = function(){
            console.log(1)
            for(var i=0;i<this.clients.length;i++){
                console.log('通知'+this.clients[i].name+'看新文章')            }
        }

        function Person(name,age){
            this.name = name 
        }
        Person.prototype.dingyue = function(gzh){
            gzh.clients.push(this)
        }

        var itcast = new GongZhongHao('黑马')
        var xm = new Person('小明')
        var ls = new Person('李四')
        
        xm.dingyue(itcast)
        ls.dingyue(itcast)
        itcast.fabu()
    </script>
</body>

</html>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] vue双向数据绑定的原理

0 个回复