vue数据驱动原理的示例分析

这篇文章给大家分享的是有关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数据驱动原理的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！