这篇文章给大家分享的是有关vue数据驱动原理的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
vue数据驱动原理是:采用数据劫持结合发布者和订阅者模式,通过“Object.defineProperty()”来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应监听回调。
本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。
vue数据驱动原理
什么是数据驱动
数据驱动是vue.js最大的特点。在vue.js中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。
比如说我们点击一个button,需要元素的文本进行是和否的切换。在jquery中,对于页面的修改我们一般是这样的一个流程,我们对button绑定事件,然后获取文案对应的元素dom对象,然后根据切换修改该dom对象的文案值。
那么vuejs是如何实现这种数据驱动的呢?
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {undefined{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。
对getter/setter的理解?
当打印出Vue实例下的data对象里的属性,它的每个属性都有两个相对应的get和set方法,顾名思义,get为取值,set为赋值,正常情况下,我们取值和赋值是用obj.prop的方式,但是这样做有一个问题,我如何知道对象的值改变了?所以就轮到set登场了。你可以把get和set理解为function,当我们调用对象的属性时,我们会进入到get.属性(){…}中,先判断对象是否有这个属性,如果没有,那麽就添加一个name属性,并给它赋值;如果有name属性,那就返回name属性。你可以把get看成一个取值的函数,函数的返回值就是它拿到的值。感觉比较重要的是set属性,当给实例赋值:此时,会进入set name(val){…};形参val就是我赋给name属性的值,在这个函数里,就可以做很多事了,比如双向绑定!因为这个值的每次改变都必须经过set,其他方式是改变不了它的,相当于一个万能的监听器。ES5的对象原型有两个新的属性__defineGetter__和__defineSetter__,专门用来给对象绑定get和set。建议使用下面这种方式,因为是在原型上书写,所以可以继承和重用。
感谢各位的阅读!关于“vue数据驱动原理的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!