说说数据绑定中互相依赖的计算属性

计算属性也叫依赖属性。是一种依赖于其他数据变化而产生值的数据。一般来说这是一个单向的关系,由原始数据推出计算属性的值。计算属性表现为只读。

但是实际应用场景中,有时会遇到双向依赖的一组数据。比如first name + last name 推出 fullname ,在fullname只读的时候是没有问题的,但是fullname可写时,fullname又可以更新firstname + lastname的值。所以firstname/lastname与fullname之间是一种双向依赖的关系。那么到底把谁作为原始data,谁作为计算属性呢。如果双方都可以各自读写,那要怎么实现响应式变化呢?

  关键的思路是,选取其中一个单向依赖,然后只让一边可以真正自由输入值,另一边如果需要输入新的值,则通过改变它依赖的数据,反过来触发它的更新,而不是直接去更新自己的值。比如我在fullname的input中输入了Tom Smith,我只要通过字符串方法分割出Tom和Smith分别设置给first name和last name(而不是直接将Tom Smith赋值给fullname)。由于fullname依赖于first name和last name,当它们改变的时候fullname会自动更新。

  当情况比较复杂的时候,比如A--->B--->C的连环依赖,最常见的情况是一个checkbox控制全选,下面有一个checkbox列表各自可以勾选,其中一些还控制着更下一级的checkbox的全选。依然按照上面的思路,我们选择的依赖关系从最底层最自由的checkbox出发,一层层往上。上层的全选checkbox依赖于下层,当全选框有输入变化时(选中或不选),遍历下层每一个自由的checkbox更新checked值,让上层全选框响应式地获得更新值。

posted on 2017-08-22 15:04  natsu07  阅读(569)  评论(0编辑  收藏  举报