Ember追踪系统 #

一、追踪系统概述 #

Ember Octane的追踪系统是实现响应式更新的核心机制。

1.1 工作原理 #

text

状态变化 → 追踪系统检测 → 触发更新 → 重新渲染

1.2 核心概念 #

概念	说明
@tracked	标记可追踪属性
getter	自动追踪依赖
autotracking	自动依赖收集

二、@tracked装饰器 #

2.1 基本用法 #

javascript

import { tracked } from '@glimmer/tracking';

class Person {
  @tracked firstName = '';
  @tracked lastName = '';

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

2.2 追踪对象 #

javascript

import { tracked } from '@glimmer/tracking';
import { TrackedObject } from 'tracked-built-ins';

class State {
  @tracked user = new TrackedObject({
    name: '',
    email: '',
  });
}

2.3 追踪数组 #

javascript

import { TrackedArray } from 'tracked-built-ins';

class TodoList {
  @tracked items = new TrackedArray([]);

  addItem(item) {
    this.items.push(item);
  }
}

三、自定义追踪 #

3.1 自定义getter #

javascript

import { tracked } from '@glimmer/tracking';

class Counter {
  @tracked _count = 0;

  get count() {
    return this._count;
  }

  set count(value) {
    this._count = value;
  }
}

3.2 计算属性缓存 #

javascript

import { tracked } from '@glimmer/tracking';

class Expensive {
  @tracked data = [];

  get processed() {
    // 只在data变化时重新计算
    return this.data.map(/* 复杂处理 */);
  }
}

四、总结 #

追踪系统要点：

概念	说明
@tracked	标记响应式属性
getter	自动依赖追踪
TrackedObject	追踪对象
TrackedArray	追踪数组

理解追踪系统是掌握Ember响应式的关键。