zoukankan      html  css  js  c++  java
  • 说说数据绑定中互相依赖的计算属性

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

    但是实际应用场景中,有时会遇到双向依赖的一组数据。比如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值,让上层全选框响应式地获得更新值。

  • 相关阅读:
    CCPC2018-湖南全国邀请赛
    2019中山大学程序设计竞赛
    [POJ]poj1185 炮兵营地(状压DP)
    [CF]Codeforces Round #551 (Div. 2)
    [EOJ]2019 ECNU XCPC April Selection #1
    [现场赛]“新智认知”杯上海高校程序设计竞赛暨第十七届上海大学程序设计春季联赛
    欧拉函数 欧拉筛法 欧拉定理
    [CF]301D Yaroslav and Divisors
    岸芷汀兰的诗集(持续更新)
    模板柱(持续更新)
  • 原文地址:https://www.cnblogs.com/natsu07/p/7363910.html
Copyright © 2011-2022 走看看