江苏龙网

  1. 首页 > 生活 > >

Vue实现3个层次的联动的难题( 二 )


■网友
没有仔细看代码。手机也写不了。基本赞成shaopeng的做法。——————————你的问题基本在于如何处理多个UI动作之间的互相影响。这种问题看似复杂，破解的方法却很简单。两个原则:1.不要用动作触发动作。否则你将管理大量巨复杂的逻辑分支。2.共享状态。尽量从状态计算显示结果，不要直接操作。具体到这个问题，所有的CheckBox到底是check上没有都可以依赖于good的状态对吧。只要你有了每个good的状态，上面的状态都可以算。你弄个method作为唯一的数据操作入口，再在事件里面调用此方法按需改变good的状态即可。我个人倾向对于computed变量，尽量让它只读。----------------------------------代码在这里Edit fiddle - JSFiddle没有用immutable，没有用vuex。额外使用了underscore，然而这个玩意只是语法糖，大家都懂的。注意vue的reactive特性是无法监视到两级以上的嵌套Object的。也就是说如果你的data是这个结构：data:{ a:{ b:{ c:value } }}那么这个c你是监视不到的。这么办呢？那就把b换掉好了——你并不需要真的换掉，只需要一句Vue.$set(a,"b",a.b)就可以了。重点是要让vue知道你对b进行了赋值，至于你是不是真改变了值……那个并不重要。但是这个方法是对Object用的，对Array是另一个方法，Array.$set(index,value)，这个value是什么也并不重要，重要的是你得通知vue我改变了Array里面的某一项。所以……理论上你只要在想要Vue强制刷新的时候给他来上一发set就好……但是，自己装的逼，跪着也要装完。为了呼应上面说的集中管理状态，不允许触发动作，我手动实现了一个简单的store和action。对，就是那个update方法。所有的状态更新都是通过它来通知的。当然，写那个函数还有另一个目的：这段代码里没有用到v-model,甚至绑在checked上的值也是可以包装过的。因为我非常非常讨厌双向绑定。（成功用双向绑定坑过自己若干次）事实上，我从来不用v-model这个关键字。


推荐阅读


上一篇：怎么样保证 android 推送及时

下一篇：微信会推出基于位置的群组功能吗