各位朋友好,在一些面试场景,尤其是大厂面试vue的时候,经常提及到一个非常重要的概念,叫做双向数据绑定。大家其实对于这个问题不会很陌生,vue中采用mvvm的模式,内置vm将view层与model层两者进行关联,任何一方的变化都会让另外一方受到影响。那回答完后,面试官还会继续追问,请回答一下你理解的双向数据绑定背后的原理是什么?那今天我们就一起探讨一下vue的背后的一些方式实现。
通过查阅一些其他资料,包括尤大大博客的对于实现双向数据绑定做了一定的解释。
所谓要实现双向数据绑定,vue中内部采用了发布-订阅模式。内部结合了Object.defineProperty这个ES5的新特性(ie8浏览器可不支持哦…),对vue传入的数据进行了相应的数据拦截,为其动态添加get与set方法。当数据变化的时候,就会触发对应的set方法,当set方法触发完成的时候,内部会进一步触发watcher,当数据改变了,接着进行虚拟dom对比,执行render,后续视图更新操作完毕。
来,直接上图看一下
好,分析完原理后,我们来看下es5这个方法Object.defineProperty有什么用呢?
上代码运行一下:
<div>
<input id='input'/>
<p id="content"></p>
</div>
let object = {}
Object.defin