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>
|