A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 小江哥 黑马粉丝团   /  2019-9-20 11:50  /  987 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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>


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马