LitElement(六)生命周期
1、概述
基于LitElement的组件通过响应观察到的属性更改而异步更新。
属性更改是分批进行的,如果在请求更新后,更新开始之前,发生更多属性更改,则所有更改都将捕获在同一次更新中。
在较高级别上,更新生命周期为:
- 一个属性被设置
- 检查是否需要更新。如果需要更新,发出请求。
- 执行更新:
- 通过properties 和 attributes.
- 渲染元素
- resolve一个promise,表示更新已完成
1.1 LitElement和浏览器事件循环
浏览器通过处理事件循环中的任务队列来执行JavaScript代码。在事件循环的每次迭代中,浏览器都从队列中提取任务并将其运行到完成。
任务完成后,在从队列中执行下一个任务之前,浏览器会分配时间来从其他来源(包括DOM更新,用户交互和微任务队列)执行工作。
默认情况下,LitElement更新是异步请求的,并作为微任务排队。这意味着上面的步骤3(执行更新)在事件循环的下一次迭代结束时执行。
您可以更改此行为,以便第3步在执行更新之前等待Promise。有关更多信息,请参见 performUpdate。
有关浏览器事件循环的更详细说明,请参阅Jake Archibald的文章。
1.2 生命周期回调
LitElement还从Web组件标准继承默认的生命周期回调:
connectedCallback
: 当组件被添加到document 的 DOM中时调用disconnectedCallback
: 当组件被从document 的 DOM中删除时调用adoptedCallback
: 当组件被移动到一个新的document中时调用attributeChangedCallback
: 当组件属性更改时调用
请注意,adoptedCallback 不会被 polyfilled。
所有的生命周期回调中都需要调用其父类的回调,例如
connectedCallback() {
super.connectedCallback() console.log('connected')
}
1.3 Promises和异步函数
LitElement使用Promise对象计划和响应元素更新。
使用async和await使得使用Promises变得容易。例如,您可以等待updateComplete承诺:
// `async` makes the function return a Promise & lets you use `await`
async myFunc(data) {
// Set a property, triggering an update
this.myProp = data; // Wait for the updateComplete promise to resolve
await this.updateComplete;
// ...do stuff...
return 'done';
}
由于异步函数返回Promise,因此您也可以等待它们:
let result = await myFunc('stuff');
// `result` is resolved! You can do something with it
2、函数和属性
按照调用顺序,更新生命周期中的方法和属性为:
- someProperty.hasChanged 调用属性更改
- requestUpdate 请求更新
- performUpdate 执行更新
- shouldUpdate 判断应该更新
- update 更新
- render 渲染
- firstUpdate 首次更新
- update 更新
- updateComplete 完成更新
2.1 someProperty.hasChanged
所有的声明属性都有一个hasChanged函数,只要属性被设置,它就会被调用,然后hasChanged函数返回true,才会执行更新,具体操作见前一节自定义属性更改部分
2.2 requestUpdate
//手动调用更新
this.requestUpdate(); // 从一个自定义属性的setter函数中调用
this.requestUpdate(propertyName, oldValue);
Params |
propertyName oldValue |
要更新的属性名 旧的属性值 |
Return | Promise |
返回updateComplete Promise,该Promise在更新完成时解决。 此方法内部的属性更改不会触发元素更新。 |
Update? | No |
此方法内部的属性更改不会触发元素更新。 |
如果hasChanged返回true,则将触发requestUpdate,更新将继续进行。
要手动启动元素更新,请不带任何参数调用requestUpdate。
要实现支持属性选项的自定义属性设置器,请将属性名称及其旧的的值作为参数传递。
手动属性更新的例子:
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
constructor() {
super(); // Request an update in response to an event
this.addEventListener('load-complete', async (e) => {
console.log(e.detail.message);
console.log(await this.requestUpdate());
});
}
render() {
return html`
<button @click="${this.fire}">Fire a "load-complete" event</button>
`;
}
fire() {
let newMessage = new CustomEvent('load-complete', {
detail: { message: 'hello. a load-complete happened.' }
});
this.dispatchEvent(newMessage);
}
}
customElements.define('my-element', MyElement);
在构造函数中添加自定义事件load-complete的监听器,并在点击事件中手动触发该自定义事件,调用requestUpdate函数,返回值为true
在自定义属性的setter方法中调用requestUpdate
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return { prop: { type: Number } };
} set prop(val) {
let oldVal = this._prop;
this._prop = Math.floor(val);
this.requestUpdate('prop', oldVal);
} get prop() { return this._prop; } constructor() {
super();
this._prop = 0;
} render() {
return html`
<p>prop: ${this.prop}</p>
<button @click="${() => { this.prop = Math.random()*10; }}">
change prop
</button>
`;
}
}
customElements.define('my-element', MyElement);
在点击事件中给this.prop属性赋值,由于重写了prop属性的setter函数,所以会执行它,然后在setter函数中点给属性赋新的值,然后调用requestUpdate()函数,传入属性名prop和旧的值,完成属性更新
2.3 performUpdate
/**
* 重写以覆盖默认行为
*/
performUpdate() { ... }
Returns | void or Promise | 执行更新 |
Update? | No | 此方法内部的属性更改不会触发元素更新。 |
默认情况下,performUpdate在执行下一次浏览器事件循环之前被调用,要调用performUpdate,请将它实现为一个异步任务,并在调用super.performUpdate()之前等待一些状态
例如:
async performUpdate() {
await new Promise((resolve) => requestAnimationFrame(() => resolve()));
super.performUpdate();
}
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() { return { prop1: { type: Number } }; } constructor() {
super();
this.prop1 = 0;
} render() {
return html`
<p>prop1: ${this.prop1}</p>
<button @click="${() => this.prop1=this.change()}">Change prop1</button>
`;
} async performUpdate() {
console.log('Requesting animation frame...');
await new Promise((resolve) => requestAnimationFrame(() => resolve()));
console.log('Got animation frame. Performing update');
super.performUpdate();
} change() {
return Math.floor(Math.random()*10);
}
}
customElements.define('my-element', MyElement);
2.4 shouldUpdate
/**
* 重写以覆盖默认行为
*/
shouldUpdate(changedProperties) { ... }
Params | changedProperties | map的键是已更改属性的名称;值是对应的先前值。 |
Returns | Boolean | 如果为true,则继续更新。默认返回值为true。 |
Updates? | Yes | 此方法内部的属性更改将触发元素更新。 |
控制是否应继续进行更新。实现shouldUpdate以指定哪些属性更改应引起更新。默认情况下,此方法始终返回true。
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
prop1: { type: Number },
prop2: { type: Number }
};
}
constructor() {
super();
this.prop1 = 0;
this.prop2 = 0;
} render() {
return html`
<p>prop1: ${this.prop1}</p>
<p>prop2: ${this.prop2}</p>
<button @click="${() => this.prop1=this.change()}">Change prop1</button>
<button @click="${() => this.prop2=this.change()}">Change prop2</button>
`;
} /**
* Only update element if prop1 changed.
*/
shouldUpdate(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
console.log(`${propName} changed. oldValue: ${oldValue}`);
});
return changedProperties.has('prop1');
} change() {
return Math.floor(Math.random()*10);
}
}
customElements.define('my-element', MyElement);
由于在shouldUpdate方法中总是判断键是否为prop1,所以prop2的属性更改总是在最后一步被终止
2.5 update
Params | changedProperties | map的键是已更改属性的名称;值是对应的先前值。 |
Updates? | No | 此方法内部的属性更改不会触发元素更新。 |
将property值反射为attributes属性,并通过lit-html调用render来渲染DOM。在此提供参考。您无需覆盖或调用此方法。
2.6 render
/**
* 重写render以覆盖默认行为
*/
render() { ... }
Returns | TemplateResult | 必须返回lit-html TemplateResult |
Updates? | No | 此方法内部的属性更改不会触发元素更新。 |
使用lit-html渲染元素模板。您必须为扩展LitElement基类的任何组件实现render函数
2.7 firstUpdated
/**
* 重写
*/
firstUpdated(changedProperties) { ... }
Params | changedProperties | map的键是已更改属性的名称;值是相应的先前值。 |
Updates? | Yes | 此方法内部的属性更改将触发元素更新。 |
在元素的DOM第一次更新之后,即在调用更新之前立即调用
创建元素模板后,请重写firstUpdated以执行一次性工作。
Example:在第一次输入时将光标焦点指向输入框
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
textAreaId: { type: String },
startingText: { type: String }
};
}
constructor() {
super();
this.textAreaId = 'myText';
this.startingText = 'Focus me on first update';
}
render() {
return html`
<textarea id="${this.textAreaId}">${this.startingText}</textarea>
`;
}
firstUpdated(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
console.log(`${propName} changed. oldValue: ${oldValue}`);
});
const textArea = this.shadowRoot.getElementById(this.textAreaId);
textArea.focus();
}
}
customElements.define('my-element', MyElement);
2.8 updated
/**
* 重写...
*/
updated(changedProperties) { ... }
Params | changedProperties | map的键是已更改属性的名称;值是对应的先前值。 |
Updates? | Yes | 此方法内部的属性更改将触发元素更新。 |
在元素的DOM已更新和呈现时调用。重写以在更新后执行某些任务。
example:在更新后将焦点聚集到元素上
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
prop1: { type: Number },
prop2: { type: Number }
};
}
constructor() {
super();
this.prop1 = 0;
this.prop2 = 0;
}
render() {
return html`
<style>button:focus { background-color: aliceblue; }</style> <p>prop1: ${this.prop1}</p>
<p>prop2: ${this.prop2}</p> <button id="a" @click="${() => this.prop1=Math.random()}">prop1</button>
<button id="b" @click="${() => this.prop2=Math.random()}">prop2</button>
`;
}
updated(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
console.log(`${propName} changed. oldValue: ${oldValue}`);
});
let b = this.shadowRoot.getElementById('b');
b.focus();
}
}
customElements.define('my-element', MyElement);
每次更新后都会聚焦于#b元素
2.9 updateComplete
// Await Promise property.
await this.updateComplete;
Type | Promise | 当元素完成更新时返回一个布尔值 |
Resolves |
如果没有其他待处理的更新则返回true 如果此更新周期触发了另一个更新则返回false |
当元素完成更新时updateComplete
Promise resolves,使用updateComplete等待更新:
await this.updateComplete;
// do stuff
this.updateComplete.then(() => { /* do stuff */ });
example:
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
prop1: { type: Number }
};
} constructor() {
super();
this.prop1 = 0;
} render() {
return html`
<p>prop1: ${this.prop1}</p>
<button @click="${this.changeProp}">prop1</button>
`;
} async getMoreState() {
return;
} async changeProp() {
this.prop1 = Math.random();
await Promise.all(this.updateComplete, this.getMoreState());
console.log('Update complete. Other state completed.');
}
} customElements.define('my-element', MyElement);
2.10 重写updateComplete
要在实现updateComplete承诺之前等待其他状态,请重写_getUpdateComplete方法。例如,在这里等待子元素的更新可能很有用。首先等待super._getUpdateComplete(),然后等待任何后续状态。
建议覆盖_getUpdateComplete方法而不是updateComplete getter,以确保与使用TypeScript的ES5输出的用户兼容(请参阅TypeScript#338)。
class MyElement extends LitElement {
async _getUpdateComplete() {
await super._getUpdateComplete();
await this._myChild.updateComplete;
}
}
3、Examples
3.1 控制何时处理更新
重写 performUpdate方法
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() { return { prop1: { type: Number } }; } constructor() {
super();
this.prop1 = 0;
} render() {
return html`
<p>prop1: ${this.prop1}</p>
<button @click="${() => this.prop1=this.change()}">Change prop1</button>
`;
} async performUpdate() {
console.log('Requesting animation frame...');
await new Promise((resolve) => requestAnimationFrame(() => resolve()));
console.log('Got animation frame. Performing update');
super.performUpdate();
} change() {
return Math.floor(Math.random()*10);
}
}
customElements.define('my-element', MyElement);
3.2 自定义哪些属性更改应引起更新
重写shouldUpdate
方法
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
prop1: { type: Number },
prop2: { type: Number }
};
}
constructor() {
super();
this.prop1 = 0;
this.prop2 = 0;
} render() {
return html`
<p>prop1: ${this.prop1}</p>
<p>prop2: ${this.prop2}</p>
<button @click="${() => this.prop1=this.change()}">Change prop1</button>
<button @click="${() => this.prop2=this.change()}">Change prop2</button>
`;
} /**
* Only update element if prop1 changed.
*/
shouldUpdate(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
console.log(`${propName} changed. oldValue: ${oldValue}`);
});
return changedProperties.has('prop1');
} change() {
return Math.floor(Math.random()*10);
}
}
customElements.define('my-element', MyElement);
3.3 自定义一组属性更改
为属性指定hasChanged。请参阅属性文档。
3.4 管理对象子属性的属性更改和更新
不能观察到变动(对对象子属性和数组项的更改)。而是重写整个对象,或在发生变动后调用requestUpdate。
// Option 1: Rewrite whole object, triggering an update
this.prop1 = Object.assign({}, this.prop1, { subProp: 'data' }); // Option 2: Mutate a subproperty, then call requestUpdate
this.prop1.subProp = 'data';
this.requestUpdate();
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() { return { prop1: { type: Object } }; }
constructor() {
super();
this.prop1 = { subProp: 0 }
}
render() {
return html`
<p>prop1.subProp: ${this.prop1.subProp}</p>
<button @click="${this.change}">change</button>
`;
}
change() {
let newVal = Math.random();
/**
* Changes to object subproperties and array items are not observable.
* Instead:
*/ // Option 1: Rewrite the whole object, triggering an update
// this.prop1 = Object.assign({}, this.prop1, { subProp: newVal }); // Option 2: Mutate a subproperty, then call requestUpdate
this.prop1.subProp = newVal;
this.requestUpdate();
}
}
customElements.define('my-element', MyElement);
3.5 在响应中更新非属性更改
调用requestUpdate
:
// Request an update in response to an event
this.addEventListener('load-complete', async (e) => {
console.log(e.detail.message);
console.log(await this.requestUpdate());
});
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
constructor() {
super(); // Request an update in response to an event
this.addEventListener('load-complete', async (e) => {
console.log(e.detail.message);
console.log(await this.requestUpdate());
});
}
render() {
return html`
<button @click="${this.fire}">Fire a "load-complete" event</button>
`;
}
fire() {
let newMessage = new CustomEvent('load-complete', {
detail: { message: 'hello. a load-complete happened.' }
});
this.dispatchEvent(newMessage);
}
}
customElements.define('my-element', MyElement);
3.6 无论属性更改如何,都请求更新
调用requestUpdate
:
this.requestUpdate();
3.7 请求更正指定的属性
调用requestUpdate(propName, oldValue)
:
let oldValue = this.prop1;
this.prop1 = 'new value';
this.requestUpdate('prop1', oldValue);
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
constructor() {
super(); // Request an update in response to an event
this.addEventListener('load-complete', async (e) => {
console.log(e.detail.message);
console.log(await this.requestUpdate());
});
}
render() {
return html`
<button @click="${this.fire}">Fire a "load-complete" event</button>
`;
}
fire() {
let newMessage = new CustomEvent('load-complete', {
detail: { message: 'hello. a load-complete happened.' }
});
this.dispatchEvent(newMessage);
}
}
customElements.define('my-element', MyElement);
3.8 第一次更新后做点什么
重写 firstUpdated
:
firstUpdated(changedProps) {
console.log(changedProps.get('prop1'));
}
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
textAreaId: { type: String },
startingText: { type: String }
};
}
constructor() {
super();
this.textAreaId = 'myText';
this.startingText = 'Focus me on first update';
}
render() {
return html`
<textarea id="${this.textAreaId}">${this.startingText}</textarea>
`;
}
firstUpdated(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
console.log(`${propName} changed. oldValue: ${oldValue}`);
});
const textArea = this.shadowRoot.getElementById(this.textAreaId);
textArea.focus();
}
}
customElements.define('my-element', MyElement);
3.9 每次更新后都做些事情
重写 updated
:
updated(changedProps) {
console.log(changedProps.get('prop1'));
}
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
prop1: { type: Number },
prop2: { type: Number }
};
}
constructor() {
super();
this.prop1 = 0;
this.prop2 = 0;
}
render() {
return html`
<style>button:focus { background-color: aliceblue; }</style> <p>prop1: ${this.prop1}</p>
<p>prop2: ${this.prop2}</p> <button id="a" @click="${() => this.prop1=Math.random()}">prop1</button>
<button id="b" @click="${() => this.prop2=Math.random()}">prop2</button>
`;
}
updated(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
console.log(`${propName} changed. oldValue: ${oldValue}`);
});
let b = this.shadowRoot.getElementById('b');
b.focus();
}
}
customElements.define('my-element', MyElement);
3.10 元素下次更新时执行一些操作
等待updateComplete承诺:
await this.updateComplete;
// do stuff
this.updateComplete.then(() => {
// do stuff
});
3.11 等待元素完成更新
等待updateComplete承诺:
let done = await updateComplete;
updateComplete.then(() => {
// finished updating
});
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
prop1: { type: Number }
};
} constructor() {
super();
this.prop1 = 0;
} render() {
return html`
<p>prop1: ${this.prop1}</p>
<button @click="${this.changeProp}">prop1</button>
`;
} async getMoreState() {
return;
} async changeProp() {
this.prop1 = Math.random();
await Promise.all(this.updateComplete, this.getMoreState());
console.log('Update complete. Other state completed.');
}
} customElements.define('my-element', MyElement);
Lit-Element基本用法完
LitElement(六)生命周期的更多相关文章
- how tomcat works 六 生命周期
我觉得这一章叫tomcat中的观察者模式,比较好! 首先,不要看本章,请查看一下关于观察者模式的资料比较好. 推荐以下知识点 基础篇 设计模式之禅----观察者模式 大家可以找到pdf阅读一下 另外本 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- 【Microsoft Azure 的1024种玩法】六、使用Azure Cloud Shell对Linux VirtualMachines 进行生命周期管理
[文章简介] Azure Cloud Shell 是一个用于管理 Azure 资源的.可通过浏览器访问的交互式经验证 shell. 它使用户能够灵活选择最适合自己工作方式的 shell 体验,本篇文章 ...
- Asp.Net生命周期系列六
上篇说到当一个Http请求流到HttpHandler这里时才开始对它的处理,那么一个请求经过HttpHandler之后, 到底怎么对它处理呢,也就是说HttpHandler会触发哪些事件,触发的顺序如 ...
- [译] ASP.NET 生命周期 – ASP.NET 上下文对象(六)
使用 HttpApplication 对象 ASP.NET 框架中的许多类都提供了许多很方便的属性可以直接映射到 HttpContext 类中定义的属性.这种交叠有一个很好的例子就是 HttpAppl ...
- android Fragments详解六:处理fragement的生命周期
把条目添加到动作栏 你的fragment们可以向activity的菜单(按Manu键时出现的东西)添加项,同时也可向动作栏(界面中顶部的那个区域)添加条目,这都需通过实现方法onCreateOptio ...
- Android学习笔记(六)Fragment的生命周期
在上一篇博文中对Fragment做了简单的介绍,现在再来探讨一下Fragment的生命周期. 一.Fragment的几种状态: 与Activity类似,Fragment也有一下几种状态: · 活动状态 ...
- C++服务器设计(六):设备连接的生命周期管理
生命周期介绍 每一个服务器系统的新连接从建立开始时,均会经历多个阶段.比如连接的建立,登录的验证,退出前的资源释放等.同时在具体的消息处理中,还会遇到不可识别的消息事件,或者消息处理时出现数据错误等. ...
- Maven详解(六)------ 生命周期
1.什么是 生命周期? Maven 强大的原因是有一个十分完善的生命周期,生命周期可以理解为项目构建步骤的集合,它定义了各个构建环节的执行顺序,有了这个顺序,Maven 就可以自动化的执行构建命令. ...
随机推荐
- ls, chgrp, chown, chmod
ls命令 [root@client ~]# ls -la 总用量 dr-xr-x---. root root 2月 : . dr-xr-xr-x. root root 2月 : .. -rwxrwxr ...
- 配置 vim 过程中必须解决的问题
网络问题 在使用 github 作为插件下载源的时候, 容易出现网络连接超时等错误 在使用 gitee 作为插件下载源的时候, 子模块可能会出现下载超时 解决方案有以下两个: 使用 VPN , 改善访 ...
- Vue自定义全局Toast和Loading
如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件 ...
- D - Counting Squares
Your input is a series of rectangles, one per line. Each rectangle is specified as two points(X,Y) t ...
- I Hate It HDU - 1754 线段树 单点修改+区间最值
#include<iostream> #include<cstring> using namespace std; ; int m,n,p; struct node{ int ...
- 订阅消息---由于微信小程序取消模板消息,限只能开发订阅消息
订阅消息开发步骤: 1.小程序管理后台添加订阅消息的模板 2.小程序前端编写调用(拉起)订阅授权 wx.requestSubscribeMessage({ tmplIds: ['34fwe1211xx ...
- Ioc依赖注入:Unity4.0.1 在项目中的应用 (MVC和API)
使用Unity的好处网上有很多,百度一下即可 这里引用了一篇关于面向接口编程的好处的文章作为引申:https://blog.csdn.net/Cyy19970527/article/details/8 ...
- java - 并发集合 Vector、synchronizedCollection、CopyOnWriteArrayList之间的区别。
概要 JDK中提供ArrayList集合方便我们对集合内元素进行增删改查,但是ArrayList为了能够在单线程中快速进行操作其设计并不支持多线程进行操作.ArrayList在多线程环境下可能会产生j ...
- @Configuration@Bean
https://blog.csdn.net/u014199143/article/details/80692685 @Configuation等价于<Beans></Beans> ...
- python 方法和函数
代码 def func(): pass class Foo(object): def func(self): pass # 执行方式一 # obj = Foo() # obj.func() # 方法 ...