状态更新

避免你的组件更新了数据后,状态却不刷新,也就是没变化,请务必看这里

组件props均未设置 deep 监听,刷新props时,请直接生成 新的props对象 (基础数据类型除外),或完成赋值操作后使用ES6拓展运算符生成新的props对象( this.someProps = { ...this.someProps } )。

具体更新数据示例

<template>
  <div class="update-demo">
    <dv-percent-pond :config="config" style="width:200px;height:100px;" />
  </div>
</template>

<script>
export default {
  name: 'UpdateDemo',
  data () {
    return {
      config: {
        value: 66,
        lineDash: [10, 2]
      }
    }
  },
  methods: {
    // 更新数据的示例方法
    updateHandler () {
      const { config } = this

      /**
       * 只是这样做是无效
       * config指向的内存地址没有发生变化
       * 组件无法侦知数据变化
       */
      this.config.value = 90
      this.config.lineDash = [10, 4]

      /**
       * 使用ES6拓展运算符生成新的props对象
       * 组件侦知数据变化 自动刷新状态
       */
      this.config = { ...this.config }
    }
  }
}
</script>

本文摘自: http://datav.jiaminghi.com/guide/#%E7%94%A8%E5%89%8D%E5%BF%85%E7%9C%8B

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐