今天讲解一下【renderedcallback()】在Lightning Web Component中的用法，大家可能对【connectedCallback()】方法非常熟悉，我们做初期数据加载时候经常会用到，那么这两个方法的执行顺序又是如何呢，下边写一个简单的例子，带我们能够更深入的了解一下。
renderedCallbackTest.html
代码语言：javascript复制<template>
<lightning-input label="Name" onchange = {handleChange}> </lightning-input>
{greeting}
</template>renderedCallbackTest.js
代码语言：javascript复制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进行适当控制。
修改后代码：
代码语言：javascript复制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】输入框输入后效果：
