Vue 双向数据绑定原理

参考文章：https://www.cnblogs.com/kidney/p/6052935.html

双向数据绑定要实现：view -- model -- model -- view
1.创建一个Vue对象，原型里要做的是接收数据，劫持并编译dom节点，将dom节点重新挂在app
2.接收数据的时候，为每一个数据都用defineProperty添加一个set，get方法
3.view -- model ： 在劫持dom节点的时候，如果是有v-model的元素，把Vue中该变量的初始值赋值给该元素value,并添加监听addEventListener，输入数据的时候就赋值给Vue中的该变量
4.model -- view： 如果是{{}}节点，该节点值为Vue中该变量的值
5.让数据实时更新，就用到订阅者发布者模式，在4步骤编译获取数据的每个节点都定义一个订阅者，在2步骤defineProperty时为每个数据都添加一个唯一的发布者dep, 在获取数据get中将改数据的订阅者添加到发布者dep里，在set数据改变的时候调用发布者dep通知所有订阅者。
（订阅者发布者模式:为每一个数据添加一个单独的发布者，在get数据的时候添加一个订阅者，在set该数据的时候通过该数据的发布者通知所有该数据的订阅者。）

    
    
    
    




    

         
        
 {{ text }}
        
 {{ text }}