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