怎样理解Vue的数据驱动

这期内容当中小编将会给大家带来有关怎样理解Vue的数据驱动，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

成都创新互联公司凭借专业的设计团队扎实的技术支持、优质高效的服务意识和丰厚的资源优势，提供专业的网站策划、成都网站设计、网站建设、网站优化、软件开发、网站改版等服务，在成都10年的网站建设设计经验，为成都近1000家中小型企业策划设计了网站。

vue是双向数据绑定的框架，数据驱动是他的灵魂，他的实现原理众所周知是Object.defineProperty方法实现的get、set重写，但是这样说太牵强外门了。

newVue进行创建vue对象，el属性是挂载的dom选择器，这里选择id为app的dom，data对象保存这所有数据响应的属性，当其中的某一属性值改变，就触发view渲染，从而实现了“数据->视图”的动态响应；

示例中msg初始值为hello，因此页面渲染时为hello，一秒之后，msg变为了hi，触发了view渲染，我们看到hello变为了li。

我们说vue是怎么实现双向数据绑定的？是Object.defineProperty实现了，那么我们就直接聚焦Object.defineProperty

vue在给每一个data的属性执行defineReactive函数，来达到数据绑定的目的。从代码中可以看到几点：

每一个数据绑定，都会new一个Dep（暂且叫他派发器），派发器的功能是什么？依赖收集以事件分发；

在属性get中，除了获取当前属性的值，还做了dep.depend()操作；

dep.depend的目的是什么？看Dep部分代码，很简单，其实就是依赖收集，将Dep.target需要收集的依赖进行添加到自己的派发器里

在属性set时，就是给属性改变值时，除了改变值意外，还执行了dep.notify()操作；

dep.notify的目的又是什么？看代码，依旧很简单，将自己派发器的所有依赖触发update函数；

这一部分很容易了解，在data的属性get时，触发了派发器的依赖收集(dep.depend)，在data的属性set时，触发了派发器的事件通知(dep.notify)；

结合已知知识，Vue的数据绑定是上面这个函数带来的副作用，因此可以得出结论：

当我们改变某个属性值时，派发器Dep通知了view层去更新

Dep.target是派发器Dep收集的依赖，并在属性值改变时触发了update函数，view层的更新与Dep.target有必然的联系。换句话说：数据->视图的数据驱动就等于Dep.target.update()。

上述就是小编为大家分享的怎样理解Vue的数据驱动了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容