Vue双向数据绑定的原理

理解Vue双向数据绑定的原理

什么是双向数据绑定？Vue是一个MVVM框架，数据绑定简单来说，就是当数据发生变化时，相应的视图会进行更新，当视图更新时，数据也会跟着变化。

基础的数据绑定

<input type="text" id="in"/>
    输入的值为：<span id="out"></span>

    <script>
        var int = document.getElementById('in');
        var out = document.getElementById('out');
        var obj = {};

        Object.defineProperty(obj, 'msg', {
            enumerable: true,
            configurable: true,
            set (newVal) {
                out.innerHTML = newVal;
            }
        })

        int.addEventListener('input', function(e) {
            obj.msg = e.target.value;
        })
    </script>

双向数据绑定

<div id="app">
       <input type="text" v-model="text">
       输入的值为：{{text}}
       <div>
           <input type="text" v-model="text">
       </div>
   </div>
   <script>
       var vm = new MVue({
           el: '#app',
           data: {
               text: 'hello world'
           }
       })
   </script>

实现思路：

1、输入框以及文本节点和data中的数据进行绑定
2、输入框内容变化时，data中的对应数据同步变化，即 view => model
3、data中数据变化时，对应的文本节点内容同步变化 即 model => view

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

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

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

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。