面试官问我vue双向数据绑定，我能跟他聊一个小时【建议收藏】

超、凢脫俗 2022-12-10 11:30 64阅读 0赞

导语：  
在面试中，我们经常能够被问到，vue的双向数据绑定是怎么实现的？又或者你对vue的源码深入分析，想要了解它的双向数据绑定时怎么实现的，这一篇教会你。

### 本文的目录 ###

*  一，实现原理
 *  二，实现过程
 *   *  1，实现一个observer
     *  2，实现一个dep消息订阅器和订阅者
     *  3，将Observer和Watcher联系起来
     *  4，跟视图层联系

# 一，实现原理 #

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]就是以上的这个视图，原理就是当视图层数据发生变化的时候，就会更新data，如果data改变了，就会更新view。

**详细过程是这样：**

1，当data 有变化的时候它通过Object.defineProperty(）方法中的set方法进行监控和更新，然后调用定义好data 和view的关系的回调函数，来通知view进行数据的改变，从而实现view视图的改变。

2，如果view 发生改变，则是通过底层的input 事件来进行data的响应更改。

# 二，实现过程 #

1，视图层改变view比较容易实现，只要通过底层的input事件就可以对data的响应更改。

2，主要难的，当data改变的时候，怎么检测到，还有怎么去更改视图层里面的数据呢？

**我们先来看一个图。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]data更新view的难点是如何知道数据变了，只要知道数据变了，那么接下去的事都好处理。只要通过Object.defineProperty( )对属性设置一个set函数，当数据改变了就会来触发这个函数，就可以实现data更新view了。

现在我们已经知道要实现vue的双向绑定，首先要对data进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有data。如果data发生变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep（容器）来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。因此接下去我们执行以下2个步骤，实现数据的双向绑定：

1.实现一个监听器Observer，用来劫持并监听所有data，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新view。

流程图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]

## 1，实现一个observer ##

## 2，实现一个dep消息订阅器和订阅者 ##

## 3，将Observer和Watcher联系起来 ##

function myVue (data, el, exp) { 
        this.data = data;
        observe(data);
        el.innerHTML = this.data[exp];
        new Watcher(this, exp, function (value) { 
            el.innerHTML = value;
        });
        return this;
    }

## 4，跟视图层联系 ##

<body>
        <h1 id="text">{
       {text}}</h1>
    </body>
    <script type="text/javascript"> var ele = document.querySelector('#text'); var myVue = new myVue({ name: 'hello world' }, ele, 'text'); </script>

**补充**：  
![在这里插入图片描述][20200902155530706.jpg_pic_center]  
微信搜索【web小馆】，回复**全栈博客项目**，即可获取**项目源码和后续的实战文章教程**。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c7b99dd19d6240e180ae2f3ea52c9457.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/71777257e71147e5b6eac2efb92ed780.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/f86f165881ec4074b2e30f3482fa4478.png
[20200902155530706.jpg_pic_center]: /images/20221123/290e253e429747358cd0575de0e95063.png
[20200825125805528.png_pic_center]: /images/20221123/e3a75102755348c0ae83183304702f14.png
[node]: /images/20221123/b8af5a1ce4b94de481434144a27abc2e.png