怎样理解Vue的数据驱动

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

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

使用vue

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

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

分析Object.defineProperty

　　我们说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的数据驱动了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。