这是lit框架的系列学习文章,跳转查看其他章节
- 不用vdom的lit框架学习1:安装和编译
- 不用vdom的lit框架学习2:挠头的web component(兼容性说明,必看)
- 不用vdom的lit框架学习3:代码结构初步解析
- 不用vdom的lit框架学习4:properties详细定义
今天的文章主要解决以下问题:
- 如何自定义外部变量的名称?
- 如何定义内部变量和外部变量?
- 如何监听外部变量的传值,并根据值进行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 | 调用时使用全小写 | 有效 |
调用时使用大小写 | 有效 |
如何定义外部变量和内部变量
这种区别是通过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就只能作为内部变量了,不能在外部指定。
那大家可能要问变量搞个内部的有什么用?那比如说可能是:
- 内部状态变量,例如计数器等
- 用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,我们认为需要讲解的地方了,通过这一章,我们希望开发的组件可以按参数从服务器获得详细内容,按需定义属性名称,修改属性格式等操作,方便小伙伴更方面的自定义组件。