怎样理解Vue的数据驱动
这期内容当中小编将会给大家带来有关怎样理解Vue的数据驱动,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
成都创新互联公司凭借专业的设计团队扎实的技术支持、优质高效的服务意识和丰厚的资源优势,提供专业的网站策划、成都网站设计、网站建设、网站优化、软件开发、网站改版等服务,在成都10年的网站建设设计经验,为成都近1000家中小型企业策划设计了网站。
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的数据驱动了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
本文题目:怎样理解Vue的数据驱动
本文来源:http://scyanting.com/article/picipe.html