Salesforce LWC（三）：初步认识

LWC使用了大量的js，html和css所以学习起来比较好上手，组件的创建更加的简单方便。这里默认大家对这些语言都有简单的了解，就不多做介绍了。而且Aura中可以使用LWC，但是LWC中无法使用Aura，LWC比Aura拥抱了更多标准的规范,而Aura中大量使用了salesforce自定义的标签。
这部分内容依旧跟着trailhead来进行学习。

生命周期

Lightning Web Components提供了一些方法，允许你将代码与组件生命周期中的关键事件“挂钩”。这些事件包括组件为:

Created
Added to the DOM
Rendered in the browser
Encountering errors
Removed from the DOM

Decorators（装饰器）

在JavaScript中，Decorators经常用于修改属性或函数的行为。在使用Decorators前，请从lwc模块中导入它，并将其放在属性或函数之前。

import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement{@api message;
}

可以导入多个Decorators,但是一个属性或函数只能有一个Decorators。例如，一个属性不能有@api和@wire 这两个装饰器，这两个装饰器也非常常用。下面是三个常用装饰器的文档介绍：

@api: Marks a field as public. Public properties define the API for a component. An owner component that uses the component in its HTML markup can access the component’s public properties. All public properties are reactive, which means that the framework observes the property for changes. When the property’s value changes, the framework reacts and rerenders the component.
@track： Tells the framework to observe changes to the properties of an object or to the elements of an array. If a change occurs, the framework rerenders the component. All fields are reactive. If the value of a field changes and the field is used in a template—or in the getter of a property used in a template—the framework rerenders the component. You don’t need to decorate the field with @track. Use @track only if a field contains an object or an array and if you want the framework to observe changes to the properties of the object or to the elements of the array. If you want to change the value of the whole property, you don’t need to use @track.
@wire: Gives you an easy way to get and bind data from a Salesforce org.

安装LWCrecipes

在sales force中安装一个我们接下来学习会用到的app点击这里进行下载，或者直接输入url：https://github.com/trailheadapps/lwc-recipes，在github中找到项目。

项目中有许多易于理解的Lightning Web组件代码示例。每个组件都演示了如何使用尽可能少的代码行编写特定任务。进入页面后看到README.md文件下拉便可以看到下载方法。

这里面推荐前两种方法，点击蓝色的标题就可以跳到安装方法的详细教学页面进行安装了。第一种方法是使用命令行操作的，第二种直接连接环境安装即可，这里截图展示一下第二种按照方法。

这里直接点击第二步中的蓝色的this link就可以安装上，后面的步骤也非常简单可以，安装说明一步一步做就好。

遇到这种情况稍微等待一下就好了，安装成功之后会收到邮件的。

成功之后我们就可以看到这个app了，接下来会对里面的组件进行一个学习。