今天讲解一下【renderedcallback()】在Lightning Web Component中的用法,大家可能对【connectedCallback()】方法非常熟悉,我们做初期数据加载时候经常会用到,那么这两个方法的执行顺序又是如何呢,下边写一个简单的例子,带我们能够更深入的了解一下。
renderedCallbackTest.html
<template>
<lightning-input label="Name" onchange = {handleChange}> </lightning-input>
{greeting}
</template>
renderedCallbackTest.js
import { LightningElement } from 'lwc';
export default class RenderedCallbackTest extends LightningElement {
greeting;
renderedCallback(){
console.log('renderd Callback');
}
handleChange(event){
this.greeting = event.target.value;
}
connectedCallback() {
console.log('connected Callback');
}
}
效果展示:
1.把这个Component拖到一个详细page上
2.按【F12】打开ConsoleLog,结果是按照【connectedCallback()】→【renderedcallback()】顺序执行的。
3.Name入力框输入【test】
4.看下边结果每当输入框中输入一个字符【renderedcallback()】都会被调用一次。
总结:【connectedCallback()】被用做Component的初期方法,加载初期数据时候执行一次,【renderedcallback()】方法是每当Component被渲染时都会被执行一次。如果有需求输入框输入数据时只想执行一次的情况下,可以写Flag进行适当控制。
修改后代码:
import { LightningElement } from 'lwc';
export default class RenderedCallbackTest extends LightningElement {
greeting;
hasRendered = true;
renderedCallback(){
if (this.hasRendered) {
this.greeting = 'set by renderedCallback';
console.log('greeting ' + this.greeting);
this.hasRendered = false;
}
}
handleChange(event){
this.greeting = event.target.value;
}
connectedCallback() {
console.log('connected Callback');
}
}
效果展示:
【Name】输入框输入后效果:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。