update

app/components/task-list/component.ts

@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { A } from '@ember/array';
+import { run, schedule } from '@ember/runloop';
+import { action } from '@ember/object';
+
+interface TaskListSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class TaskListComponent extends Component<TaskListSignature> {
+  @tracked model: number[] = [];
+
+  constructor() {
+    super(...arguments);
+    // this.model used in component TaskListComponent, but it had already been used previously in the same computation
+    // 如果这调用
+    // this.loadTask();
+  }
+
+  @action
+  reloadTask() {
+    console.log('reload task fire');
+    this.loadTask();
+    // schedule('afterRender', () => {
+    //   this.loadTask();
+    // });
+  }
+
+  @action
+  loadTask() {
+    console.log('load task fire');
+    const task = [];
+    console.log(this.model);
+    for (let index = 0; index < 10; index++) {
+      const num = index * Math.random() * 10;
+      task.push(num);
+    }
+    this.model = [...task];
+  }
+
+  willDestroy(): void {
+    super.willDestroy(...arguments);
+    console.log('willdestroy');
+  }
+}

app/components/task-list/template.hbs

@@ -0,0 +1,6 @@
+<div {{did-update this.reloadTask @tag}} ></div>
+<div {{did-insert this.loadTask}}>
+  {{#each this.model as |item|}}
+    <div>{{item}}</div>
+  {{/each}}
+</div>

app/controllers/task.ts

@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+
+export default class TaskController extends Controller {
+  queryParams = ['tag'];
+  tag = null;
+}

app/router.ts

@@ -9,4 +9,5 @@ export default class Router extends EmberRouter {
 Router.map(function () {
   this.route('about');
   this.route('concact', { path: '/getting-in-touch' });
+  this.route('task');
 });

app/routes/task.ts

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class TaskRoute extends Route {
+}

app/templates/task.hbs

@@ -0,0 +1,14 @@
+<ul>
+  <li>
+    <LinkTo @route="task" @query={{hash tag="tag1"}}>tag1</LinkTo>
+  </li>
+  <li>
+    <LinkTo @route="task" @query={{hash tag="tag2"}}>tag2</LinkTo>
+  </li>
+</ul>
+
+<span>{{this.tag}}</span>
+
+{{!-- {{component "task-list" tag=this.tag}} --}}
+
+<TaskList @tag={{this.tag}} />