Vue数据双向绑定原理是什么?

面试官:说下Vue数据双向绑定原理是什么?

ME: 固定回答:

    Vue的数据双向绑定原理是数据劫持,结合发布订阅者模式,通过Object.defineProperty()来劫持各个属性的setter,getter属性,当数据变化时发布消息给订阅者,触发对应的回调函数。

面试官: 可以具体说下吗?详细一点?

ME: 这怎么答?其他没看呀?再想想,好像是。。。

  1.    需要Observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter,与getter,这样的话这个对象的属性赋值,就会触发setter,就能监听到数据变化了
  2.    Compile解析模板指令,将模板中的变量替换成数据,然后初始化页面视图,并将每个指令对应的节点绑定新函数,添加监听数据的订阅者,一旦数据又变动,收到通知,更新视图
  3.    Watcher就是那个订阅者,主要就是连接Observer与Compile之间的桥梁:  

                    · 在自身实例话时往属性订阅器里面添加自己

                    · 自身有一个Update()的方法

                    · 待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调

 心想:太难了。。。

 这其实就是MVVM的机制

posted @ 2020-04-13 15:53  等风来灬  阅读(343)  评论(0编辑  收藏  举报