Salesforce Component Lifecycle Hooks组件生命周期挂钩

Salesforce Component Lifecycle Hooks组件生命周期挂钩

---

前言

Lightning Web组件模型提供的方法使您可以将代码“挂钩”到组件生命周期中的关键事件。

获取更多请看这里 Lightning Web Components开发人员指南：参考（包括HTML模板指令，装饰器等）

---

康木昂

这些事件包括组件何时为：

• 已建立 Created
• 添加到DOM Added to the DOM
• 在浏览器中呈现 Rendered in the browser
• 遇到错误 Encountering errors
• 已从DOM中删除 Removed from the DOM

使用回调方法响应任何这些生命周期事件。例如，connectedCallback() 将组件插入DOM时将调用。的 offlineedCallback() 从DOM中删除组件时将调用。

在我们用来测试条件渲染的JavaScript文件中，我们使用了 connectedCallback()将组件插入DOM时自动执行代码的方法。代码等待3秒钟，然后设置为 true

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
   
    @track 
    ready = false;
    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

注意

当您在VS Code这样的编辑器中使用此示例时，可能会看到一个棉绒警告“ Restricted async operation...。” setTimeout() 功能。此警告表明您使用的异步操作经常被滥用；它根据时间延迟行为，而不是等待事件。在这种情况下，setTimeout() 适用于演示任意时间延迟，并且警告不应阻止您使用它。

另外，请注意，我们使用了 this关键词。如果您已经编写了JavaScript，则应该熟悉这种用法，并且其行为就像在其他环境中一样。thisJavaScript中的关键字指当前上下文的顶层。在这里，上下文是此类。哪一个ready？这堂课已经准备好了。的connectedCallback() 方法为Apex分配值 ready变量。这是一个很好的例子，说明了Lightning Web组件模型如何使您将JavaScript功能引入开发。您可以找到有关以下内容的链接：this 在资源部分。

---

好了到这里就先告一段落，下一节我们来学习讨论–组件所处的环境。

---

最后

• 更多参考精彩博文请看这里：《陈永佳的博客》

• 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！

---