フィールド、オブジェクト、配列のリアクティビティ

1<!-- helloExpressions.html -->
2
3<template>
4  <lightning-card title="HelloExpressions" icon-name="custom:custom14">
5    <div class="slds-m-around_medium">
6      <lightning-input
7        name="firstName"
8        label="First Name"
9        onchange={handleChange}
10      ></lightning-input>
11      <lightning-input
12        name="lastName"
13        label="Last Name"
14        onchange={handleChange}
15      ></lightning-input>
16      <p class="slds-m-top_medium">Uppercased Full Name: {uppercasedFullName}</p>
17    </div>
18  </lightning-card>
19</template>

1// helloExpressions.js
2
3import { LightningElement } from "lwc";
4
5export default class TrackExample extends LightningElement {
6  firstName = "";
7  lastName = "";
8
9  handleChange(event) {
10    const field = event.target.name;
11    if (field === "firstName") {
12      this.firstName = event.target.value;
13    } else if (field === "lastName") {
14      this.lastName = event.target.value;
15    }
16  }
17
18  get uppercasedFullName() {
19    return `${this.firstName} ${this.lastName}`.trim().toUpperCase();
20  }
21}

1import { LightningElement } from "lwc";
2
3export default class ReactivityExample extends LightningElement {
4  bool = true;
5  number = 42;
6  obj = { name: "John" };
7
8  checkMutation() {
9    this.bool = false; // Mutation detected
10
11    this.number = 42; // No mutation detected: previous value is equal to the newly assigned value
12    this.number = 43; // Mutation detected
13
14    this.obj.name = "Bob"; // No mutation detect: `obj` field value is not reassigned
15    this.obj = { name: "John" }; // Mutation detected - redefining the object with the same value creates a new object
16    this.obj = { ...this.obj, title: "CEO" }; // Mutation detected
17  }
18}

1fullName = { firstName: "", lastName: "" };

1// Component rerenders.
2this.fullName = { firstName: "John", lastName: "Doe" };

1// Component doesn't rerender.
2this.fullName.firstName = "John";

1// Component rerenders.
2@track fullName = { firstName : '', lastName : ''};
3this.fullName.firstName = 'John';

1@track obj = {value1: 'Hello'};
2
3get words() {
4    return Object.entries(this.obj)
5              .map(([key, value]) => ({key, value}));
6  }

1// Component rerenders.
2setValue1(e) {
3  this.obj.value1 = 'Hello World';
4}
5
6// Component doesn’t rerender.
7setValue2(e) {
8  this.obj.value2 = 'Hello LWC';
9}

1setValue2(e) {
2  this.obj = {
3    ...this.obj,
4      value2: 'Hello LWC'
5  };
6}

1arr = ["a", "b"];

1// Component rerenders.
2this.arr = ["x", "y", "z"];

1// Component doesn’t rerender.
2this.arr[0] = "x";
3this.arr.push("c");

1@track arr = ['a','b'];
2
3get computedArray() { return this.arr.join(','); }
4
5update() {
6  this.arr[0] = 'x';
7  this.arr.push('c');
8}

1// trackDate.js
2import { LightningElement, track } from "lwc";
3export default class TrackDate extends LightningElement {
4  @track x = new Date();
5
6  initDate() {
7    this.x = new Date();
8  }
9
10  updateDate() {
11    this.x.setHours(7); // No mutation detected
12  }
13}

1<!-- trackDate.html -->
2<template>
3  <p>Date: {x}</p>
4
5  <button onclick={initDate}>Init</button>
6  <button onclick={updateDate}>Update</button>
7</template>

1updateDate() {
2  const cloned = new Date(this.x.getTime());
3  cloned.setHours(7);
4
5  // Assign the new date instance to rerender the component.
6  this.x = cloned;
7}