从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这期内容当中小编将会给大家带来有关怎样理解Vue的数据驱动,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
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的数据驱动了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图