这是lit框架的系列学习文章，跳转查看其他章节

今天的文章主要解决以下问题：

如何自定义外部变量的名称？
如何定义内部变量和外部变量？
如何监听外部变量的传值，并根据值进行axios等异步操作？
如何对变量进行转化，比如我的外部变量是string类型，我要转成int怎么办？

今天的文章需要一定的基础，如果上面这些目标有些不好理解的话，可以跳回到第三章，初步了解lit的组件代码的格式，学会定义一些properties，并且让这些properties做到动态渲染。

首先复习一下上次上次我们定义的properties，都是只定义了一个类型

static get properties() {
    return {
      /**
       * Copy for the read the docs hint.
       */
      docsHint: { type: String },

      /**
       * The number of times the button has been clicked.
       */
      count: { type: Number },
    }
  }

这些properties和vue的prop有很大区别，vue的prop是所有外部可定义的变量，而lit的properties不仅包含了外部变量，而且也要包含内部需要动态渲染的变量（可等效视为vue的data），不在properties里面定义的变量都无法在后期参与页面的动态生成，只能是静态值。

和vue相同的是，外部变量都是可以通过组件调用时传入参数的，例如上面的docsHint可以这样设置：

<my-element docshint="这是一段测试"></my-element>

默认情况下，对应的名称是变量名的全小写。

如何自定义外部变量的名称？

如果需要自定义外部变量的名称，可以在定义时，加入attribute属性

  static get properties() {
    return {
      docsHint: { type: String, attribute:"docsused" },

      count: { type: Number},
    }
  }

这里提醒一下，定义的attribute只能是全小写或小写和-混合，例如docs-used，包含大写字母无效

定义情况	调用情况	是否有效
定义带大小写，例如docsUsed	调用时使用全小写	无效
定义带大小写，例如docsUsed	调用时使用相同大小写	无效
定义时全小写，例如docsused	调用时使用全小写	有效
定义时全小写，例如docsused	调用时使用大小写	有效

如何定义外部变量和内部变量

这种区别是通过state属性进行标注的，例如我们把docsHint改为内部变量：

static get properties() {
    return {
      /**
       * Copy for the read the docs hint.
       */
      docsHint: { type: String, state: true },

      /**
       * The number of times the button has been clicked.
       */
      count: { type: Number },
    }
  }

这样，docsHint就只能作为内部变量了，不能在外部指定。

扫描二维码关注公众号，回复： 14801645 查看本文章

那大家可能要问变量搞个内部的有什么用？那比如说可能是：

内部状态变量，例如计数器等
用axios从服务器获取的数据，这些数据和外部数据无关，但也是内部需要参与页面绘制的数据。

如何监听外部变量的传值，并根据值进行axios等异步操作

那有些axios获取的数据，可能还需要外部数据作为参数，例如传入id，再从服务器通过axios获取详细数据这种情况。

我本来以为是和vue类似，在某个生命周期的回调函数中处理，例如vue的onMounted，但是我从官方的介绍里，实在没有领会到这个意思

Lifecycle – Lithttps://lit.dev/docs/components/lifecycle/

后来经过多方搜索，其实写法也很简单，在对应的property的set函数里写就好了，比如我们的代码要通过userid获得作者的统计信息。那其实就是这样写：

set userId(value) {
    // this.userId = value;
    axios.getServicePageUserstatById(value).then(noError).then((data) => {
        this.userStat = data;
    })
}

这里的userStat是另外一个property，通过监听userId达到了刷新userStat的效果。

除了set函数之外，每个property还对应有个get函数

get userId() { return this._id; }

这样，通过setter和getter，我们可以达到类似vue computed属性的效果。

如何对变量进行转化，比如我的外部变量是string类型，我要转成int怎么办？

通过上面的内容，我们已经可以获取一个外部变量，以及根据外部变量通过axios等附加操作更新其他变量的效果了。

那有时，我们还会遇到需要对传入数据进行一次转化，修改为方便在渲染时使用的格式的需求，这时，我们会使用到converter属性，converter属性也是在定义时定义，类似上面讲的attribute:

static get properties() {
        return {
            created: {
                type: String,
                converter: {
                    fromAttribute: (value) => {
                        return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
                    }
                }
            },
        }
}

例如我们有一个创建时间属性，我们需要转换显示格式，我们就定义了一个converter，converter里面包含fromAttribute，表示从用户定义属性获取时，应该做什么转换。另外还有一个函数是toAttribute，表示赋值回去时，应该做什么操作。

除了上面这种自定义转换的方式之外，lit默认内置了string到number，string到json object等转换方式，详见官方文档

Reactive properties – Lithttps://lit.dev/docs/components/properties/#conversion-type以上就是关于properties，我们认为需要讲解的地方了，通过这一章，我们希望开发的组件可以按参数从服务器获得详细内容，按需定义属性名称，修改属性格式等操作，方便小伙伴更方面的自定义组件。

不用vdom的lit框架学习4：properties详细定义

如何自定义外部变量的名称？

如何定义外部变量和内部变量

如何监听外部变量的传值，并根据值进行axios等异步操作

如何对变量进行转化，比如我的外部变量是string类型，我要转成int怎么办？

猜你喜欢