vue实现双向绑定原理

╰半橙微兮° 2022-05-27 04:26 271阅读 0赞

## 原理： ##

vue主要是借助对象的访问器属性（Object.defineProperty）劫持数据，并结合订阅者-发布者模式来实现数据双向绑定。

通过Object.defineProperty把data中的各数据属性改为访问器属性，来劫持每个属性的setter、getter；setter劫持到数据变化后，作为发布者 发布通知，订阅者们接到通知后更新数据。

为了进一步说明vue原理，这里我们借助实例来进行讲解。

## 实例： ##

有一段html代码（mvvm.html），需要保持 输入框中数据和data中数据同步。需求有了，那我们如何实现呢？看代码：

**mvvm.html代码**：

**利用Object.defineProperty把data中的各数据属性改为访问器属性**：

//把data中的所有数据属性修改为访问器属性：
    function observe(obj,vm){ 
        Object.keys(obj).forEach(function(key){ 
            defineReactive(obj,key,obj[key]);
        })
    }
    //数据属性修改为访问器属性：
    function defineReactive(obj,key,val){ 
        var dep = new Dep();//主题对象，存放key属性的所有订阅者
        Object.defineProperty(obj,key,{
            get: function(){ 
                if(Dep.target){
                    dep.subs.push(Dep.target);//添加订阅者
                }
                return val;
            },
            set: function(newVal){ 
                if(val==newVal)return;
                val = newVal;//数据劫持：当给key属性赋值时，会触发set方法
                dep.notify();//发布通知
            }
        })
    }

**定义主题对象：添加订阅者和发布者方法**

**订阅者：添加数据更新方法**

**利用documentFragment（文档片段）来处理节点，处理后再把文档片段插入挂载目标**（注：操作documentFragment优于直接操作Dom节）

function nodeToFragment(node,vm){ 
        var fragment = document.createDocumentFragment();
        var child;
        while(child = node.firstChild){
            compile(child,vm);//编译数据
            fragment.appendChild(child);
        }
        return fragment;
    }

**编译数据：解析模板指令，将模板中的变量替换成数据**

创建Vue构造方法：

function Vue(options){ 
        this.data = options.data;
        var data = this.data;
    
        observe(data,this);
    
        var id = options.el;
        var dom = nodeToFragment(document.getElementById(id),this);
        document.getElementById(id).appendChild(dom);
    }

**创建Vue示例：调用Vue，实现 输入框数据和data数据同步**：

var vm = new Vue({
        el: 'app',
        data: {
            name:'Lucy'
        }
    })

> 访问器属性介绍：[https://blog.csdn.net/yihanzhi/article/details/79900047][https_blog.csdn.net_yihanzhi_article_details_79900047]  
> 参考文章：[https://segmentfault.com/a/1190000006599500][https_segmentfault.com_a_1190000006599500]

[https_blog.csdn.net_yihanzhi_article_details_79900047]: https://blog.csdn.net/yihanzhi/article/details/79900047
[https_segmentfault.com_a_1190000006599500]: https://segmentfault.com/a/1190000006599500