Salesforce知识点：LWC（Lightning Web Components）面试题及答案

原创

已于 2025-09-18 22:34:45 修改 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #Salesforce

于 2025-09-18 22:27:01 首次发布

LWC（Lightning Web Components）面试题及答案

Lightning Web Components（LWC）是Salesforce推出的基于现代Web标准的前端框架，已成为Salesforce前端开发的主流技术。以下是LWC面试中常见的问题及详细解答，涵盖基础概念、组件通信、数据交互等核心知识点。

1. 什么是LWC？它与Aura组件有何区别？

答案：
LWC是Salesforce基于现代Web标准（ES6+、Shadow DOM、Custom Elements）开发的轻量级组件框架，用于构建高性能的Salesforce界面。

与Aura组件的主要区别：

架构基础：LWC基于原生Web标准，无需额外框架抽象；Aura是Salesforce自定义框架，有自己的抽象层
性能：LWC更轻量，加载速度更快，执行效率更高
语法：LWC使用标准JavaScript类和HTML，学习曲线平缓；Aura使用自定义语法（如{!v.attribute}）
互操作性：LWC可以嵌入Aura组件，但Aura组件不能嵌入LWC
开发体验：LWC支持现代开发工具和特性（如模块、装饰器），Aura则相对陈旧

2. LWC的组件结构是什么样的？每个文件的作用是什么？

答案：
一个完整的LWC组件包含以下文件（均使用相同的组件名）：

.html：组件的模板文件，定义UI结构，支持数据绑定和指令
.js：组件的逻辑文件，包含属性定义、方法和生命周期钩子
.js-meta.xml：组件的元数据文件，定义组件的配置（如API版本、可见性、可在哪些页面使用）
可选的.css：组件的样式文件，样式被Shadow DOM隔离，仅作用于当前组件

示例结构：

myComponent/
├── myComponent.html
├── myComponent.js
├── myComponent.js-meta.xml
└── myComponent.css

3. LWC中如何实现父子组件通信？

答案：
LWC遵循单向数据流原则，父子组件通信方式如下：

父组件向子组件传递数据

通过公共属性（public properties） 实现，子组件使用@api装饰器声明可接收的属性：

// 子组件：childComponent.js
import {
   
    LightningElement, api } from 'lwc';
export default class ChildComponent extends LightningElement {
   
   
    @api message; // 声明可从父组件接收的属性
    @api userInfo; // 可以接收复杂类型
}

父组件在引用子组件时传递数据：

<!-- 父组件：parentComponent.html -->
<c-child-component 
    message="Hello from Parent"
    user-info={currentUser}
></c-child-component>

子组件向父组件传递数据

通过自定义事件（CustomEvent） 实现，父组件监听事件并处理数据：

// 子组件：childComponent.js
handleClick() {
   
   
    // 创建自定义事件，通过detail传递数据
    const event = new CustomEvent('notify', {
   
   
        detail: {
   
    
            selectedId: '123',
            value: 'some data'
        },
        bubbles: false, // 是否冒泡
        composed: false // 是否穿透Shadow DOM
    });
    this.dispatchEvent(event); // 触发事件
}

父组件监听并处理事件：

<!-- 父组件：parentComponent.html -->
<c-child-component onnotify={handleNotification}></c-child-component>

// 父组件：parentComponent.js
handleNotification(event) {
   
   
    console.log('Received data:', event.detail.selectedId);
    console.log('Received value:', event.detail.value);
}

4. LWC的生命周期钩子有哪些？各自的使用场景是什么？

答案：
LWC提供以下核心生命周期钩子：

constructor()
- 调用时机：组件初始化时（实例创建时）
- 用途：初始化变量和状态
- 限制：不能访问DOM，不能访问@api属性，不能调用Apex方法

connectedCallback()

调用时机：组件被插入到DOM中时
用途：执行初始化逻辑，如加载数据（调用Apex）、设置事件监听

connectedCallback() {
     
     
    this.loadData(); // 加载数据
    window.addEventListener('resize', this.handleResize);
}

disconnectedCallback()

调用时机：组件从DOM中移除时
用途：清理资源，如移除事件监听、清除定时器

disconnectedCallback() {
     
     
    window.removeEventListener('resize', this.handleResize);
    clearInterval(this.timer);
}

renderedCallback()
- 调用时机：组件渲染完成或重新渲染后
- 用途：执行依赖DOM的操作
- 注意：需要避免在此处修改会触发重渲染的属性，防止无限循环
errorCallback(error, stack)
- 调用时机：组件或其子组件抛出错误时
- 用途：错误处理和日志记录
```
errorCallback(error, stack) {
     
     
    this.error = error.message;
    console.
```