Vue数据双向绑定原理（vue2向vue3的过渡）

╰半橙微兮° 2021-08-13 15:24 484阅读 0赞

众所周知，Vue的两大重要概念：

1.  数据驱动
2.  组件系统

接下来我们浅析`数据双向绑定`的原理

## 一、vue2 ##

### 1、认识defineProperty ###

vue2中的双向绑定是基于`defineProperty`的`get操作`与`set操作`，那么我们简单认识下`defineProperty`，  
**作用：** 就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。  
那么我们先来看下`Object.getOwnPropertyDescriptor()`，有定义方法就会有获取方法，对这就是与`defineProperty`相对的方法，它可以获取属性值。

var a ={ 
        b:1,
        c:2
    }
    console.log(Object.getOwnPropertyDescriptor(a,'b')); //查看获取b属性

![在这里插入图片描述][20191113152032867.png]  
这就是打印出来的结果，`configurable`的意思是可便利，`enumerable`的意思是可枚举，`writable`的意思是可写。

### 2、使用defineProperty实现简单的私有变量 ###

知道了属性内部的属性值，我们可以使用`defineProperty`来实现一个私有变量。

var a ={ 
        b:1,
        c:2
    }
    Object.defineProperty(a,'b',{ 
        writable:false  //不可写
    })
    console.log(Object.getOwnPropertyDescriptor(a,'b')); //查看获取b属性

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]  
发现，改变不了`a.b`的值。

--------------------

另外，还可以使用一个很快捷的方法实现私有变量

var a ={ 
        b:1,
        c:2
    }
    Object.freeze(a,'b'); //冻结，可理解为变为私有属性
    // Object.seal(a,'b'); //configurable置为false 
    console.log(Object.getOwnPropertyDescriptor(a,'b')); //查看获取b属性

![在这里插入图片描述][20191113153505377.png]  
同样，`writable`为false。如果使用`seal()`只能使`configurable`为false。

### 3、简单认识defineProperty的get、set的方法 ###

我们先不要创建全局变量，跟get方法return值，你会发现值为undefined  
![在这里插入图片描述][20191113154436316.png]  
于是我们改了改

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]  
取到了。

### 4、使用defineProperty简单实现Vue双向绑定 ###

**test.js**

// 使用defineProperty
    function vue () { 
        this.$data={ 
            a:1 // 数组的话不会更新
        };
        this.el=document.getElementById('app');
        this._html="";
        this.observe(this.$data);
        this.render();
    };
    vue.prototype.observe=function(obj){ 
        var value;
        var self=this;
        for(var key in obj){ 
            value =obj[key];
            if(typeof value === 'object'){ 
                this.observe(value)
            }else{ 
                Object.defineProperty(this.$data,key,{ 
                    get:function(){ 
                        return value;
                    },
                    set:function(newvalue){ 
                        value=newvalue;
                        self.render();
                    }
                })
            }
        }
    }
    vue.prototype.render=function(){ 
        this._html='I am '+ this.$data.a;
        this.el.innerHTML=this._html;
    }
    
    
    // ***************************************
    //数组改变更新，装饰者模式
    // var arraypro=Array.prototype;
    // var arrayob=Object.create(arraypro);
    // var arr = ["push","pop","shift"];
    // // arr里的方法，既能保持原有的方法，又能触发更新。
    // arr.forEach(function(method,index){ 
    // arrayob[method]=function(){ 
    // var ret=arraypro[method].apply(this,arguments);
    // console.log('更新');
    // return ret;
    // }
    // })
    // var arr=[];
    // arr.__proto__=arrayob;
    // arr.push(1);

**test.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>vue双向绑定原理</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="test.js"></script>
    <script> var vm = new vue(); setTimeout(function(){ console.log('changes'); console.log(vm.$data); vm.$data.a=222; },2000) </script>
    </html>

这样我们就简单实现了数据双向绑定。

## 二、vue3 ##

### 1、简单认识Proxy ###

就是一种机制，用来拦截外界对目标对象的访问，可以对这些访问进行过滤或者改写，所以Proxy更像是目标对象的代理器。

这里需要注意的是：**第一次使用proxy时，在new的时候把原对象替换掉。就会触发get方法**。

看到上方的代码，我们可以总结Proxy的几个优点：

1.  defineProperty只能监听某个属性，不能对全对象监听；
2.  所以可以省去for in 提升效率；
3.  可以监听数组，不用再去单独的对数组做异性操作。

### 2、使用Proxy简单实现数据双向绑定 ###

**test1.js**

// 使用Proxy
    function vue () { 
        this.$data={ 
            a:1 
        };
        this.el=document.getElementById('app');
        this._html="";
        this.observe(this.$data);
        this.render();
    };
    vue.prototype.observe=function(obj){ 
        var self=this;
        this.$data=new Proxy(this.$data,{ 
            get:function(target,key){ 
                return target[key];
            },
            set:function(target,key,newvalue){ 
                target[key]=newvalue;
                self.render();
            }
        })
    }
    vue.prototype.render=function(){ 
        this._html='I am '+ this.$data.a;
        this.el.innerHTML=this._html;
    }

**test.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>vue双向绑定原理</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="test1.js"></script>
    <script> var vm = new vue(); setTimeout(function(){ console.log('changes'); console.log(vm.$data); vm.$data.a=222; },2000) </script>
    </html>

### 3、Proxy还可以做什么呢？ ###

（1）、校验类型

（2）、真正私有变量

[20191113152032867.png]: /images/20210813/23ae0a129d794f099a0e18de869cd44e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20210813/47da91df90034cc9917d43c54750f011.png
[20191113153505377.png]: /images/20210813/7fb1b7a887914917b2ad4bcbfb82f9bf.png
[20191113154436316.png]: /images/20210813/13f16e8954324995adbae77c3640f843.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: /images/20210813/c409f922368546c18a5939e0f0213cb4.png