(资料图片)

stenciljs 可以方便的构建交互式组件支持以下装饰器

componentstatepropwatchmethodelementeventlistenComponent 装饰器

@Component是一个装饰器，它将 TypeScript 类指定为 Stencil组件。 每个模板组件在构建时都会转换为 Web component。

import { Component } from "@stencil/core";@Component({  tag: "todo-list",  styleUrl: "./todo-list.css",  // additional options})export class TodoList {  // implementation omitted}

@Component装饰器还有其它的一些参数

assetsDirs: 是从组件到包含组件所需的静态文件（资产）的目录的相对路径数组。scope：是否隔离css的作用域，如果启用了shadow则此项不能设置为 true。shadow: 阴影dom用来隔离样式。styleUrls：包含要应用于组件的样式的外部样式表的相对 URL 列表。styles：内联 CSS 而不是使用外部样式表的字符串。State

@State用于内部的状态管理，修改 @State装饰的变量会触发组件的重新渲染

import { Component, State, h } from "@stencil/core";@Component({    tag: "current-time",})export class CurrentTime {    timer: number;    // `currentTime` is decorated with `@State()`,    // as we need to trigger a rerender when its    // value changes to show the latest time    @State() currentTime: number = Date.now();        connectedCallback() {        this.timer = window.setInterval(() => {                        // the assignment to `this.currentTime`            // will trigger a re-render            this.currentTime = Date.now();        }, 1000);    }    disconnectedCallback() {        window.clearInterval(this.timer);    }    render() {        const time = new Date(this.currentTime).toLocaleTimeString();        return (            {time}        );    }}

Prop

@Prop是用于声明外部数据传入组件的装饰器。

支持的数据类型有 numberstringbooleanObjectarray,可以使用this 进行数据访问，在html 设置需要使用dash-case 方式在jsx 中使用camelCase 方式，默认prop 是不可变的，使用添加mutable: true进行修改, 使用 reflech可以保持 prop和 html属性同步

import { Component, Prop, h } from "@stencil/core";@Component({    tag: "todo-list-item",})export class ToDoListItem {    @Prop({        mutable: true,        reflect: false    }) isComplete: boolean = false;    @Prop({ reflect: true }) timesCompletedInPast: number = 2;    @Prop({ reflect: true }) thingToDo: string = "Read Reflect Section of Stencil Docs";}

Watch

@Watch()是应用于模具组件方法的修饰器。 修饰器接受单个参数，即用 @Prop()或 @State()修饰的类成员的名称。 用 @Watch()修饰的方法将在其关联的类成员更改时自动运行。

// We import Prop & State to show how `@Watch()` can be used on// class members decorated with either `@Prop()` or `@State()`import { Component, Prop, State, Watch } from "@stencil/core";@Component({  tag: "loading-indicator" })export class LoadingIndicator {  // We decorate a class member with @Prop() so that we  // can apply @Watch()  @Prop() activated: boolean;  // We decorate a class member with @State() so that we  // can apply @Watch()  @State() busy: boolean;  // Apply @Watch() for the component"s `activated` member.  // Whenever `activated` changes, this method will fire.  @Watch("activated")  watchPropHandler(newValue: boolean, oldValue: boolean) {    console.log("The old value of activated is: ", oldValue);    console.log("The new value of activated is: ", newValue);  }  // Apply @Watch() for the component"s `busy` member.  // Whenever `busy` changes, this method will fire.  @Watch("busy")  watchStateHandler(newValue: boolean, oldValue: boolean) {    console.log("The old value of busy is: ", oldValue);    console.log("The new value of busy is: ", newValue);  }    @Watch("activated")  @Watch("busy")  watchMultiple(newValue: boolean, oldValue: boolean, propName:string) {    console.log(`The new value of ${propName} is: `, newValue);  }}

mehtod

可以方便的导出函数，方便外部调用。

import { Method } from "@stencil/core";export class TodoList {  @Method()  async showPrompt() {    // show a prompt  }}// used registeredel.showPrompt();

Element

@Element装饰器是如何访问类实例中的 host 元素。这将返回一个 HTMLElement实例，因此可以在此处使用标准 DOM 方法/事件。

import { Element } from "@stencil/core";...export class TodoList {  @Element() el: HTMLElement;  getListHeight(): number {    return this.el.getBoundingClientRect().height;  }}

其它

Event 和 Listen 装饰器将在下一节 事件 中讲解。