Subject和BehaviorSubject有什么区别？

Question

我对 Subject 和 BehaviorSubject 的区别不是很清楚。难道只是因为 BehaviorSubject 有 getValue() 函数吗？

- Mike Jerred

---

不错的答案：https://dev59.com/6VcQ5IYBdhLWcg3wFP2a#55991072 - Billu

@dev 我同意... - William

Answer 1

BehaviorSubject保存一个值。当订阅时，它立即发出该值。Subject不保存值。

Subject示例（使用RxJS 5 API）：

const subject = new Rx.Subject();
subject.next(1);
subject.subscribe(x => console.log(x));

控制台输出将为空

BehaviorSubject示例：

const subject = new Rx.BehaviorSubject(0);
subject.next(1);
subject.subscribe(x => console.log(x));

控制台输出：1

另外：

• BehaviorSubject 应该使用初始值创建：new Rx.BehaviorSubject(1)
• 如果希望主题获取先前发布的值，请考虑使用ReplaySubject。

- ZahiC

---

你的意思是在调用subject.next()之前必须先订阅主题吗？ - Eric Huang

@eric提到的主题是有区别的，是正确的。 - onefootswill

请注意，在BehaviorSubject的构造函数中，您需要传入第一个值。;) - mrmashal

如果有帮助的话：Subjects（主题）= 事件 - BehaviorSubject（行为主题）= 状态； - Jonathan Stellwag

通常情况下，我们没有初始值，因为我们想要将 observable 转换为 behavior subject：不必担心初始值，只需使用一些“空”值即可。 - minus one

Answer 2

BehaviorSubject

BehaviorSubject在订阅时会返回初始值或当前值。

var bSubject= new Rx.BehaviorSubject(0);  // 0 is the initial value

bSubject.subscribe({
  next: (v) => console.log('observerA: ' + v)  // output initial value, then new values on `next` triggers
});

bSubject.next(1);  // output new value 1 for 'observer A'
bSubject.next(2);  // output new value 2 for 'observer A', current value 2 for 'Observer B' on subscription

bSubject.subscribe({
  next: (v) => console.log('observerB: ' + v)  // output current value 2, then new values on `next` triggers
});

bSubject.next(3);

输出结果为：

observerA: 0
observerA: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

主题

Subject在订阅时不会返回当前值。它仅在调用.next(value)时触发，并返回/输出value

var subject = new Rx.Subject();

subject.next(1); //Subjects will not output this value

subject.subscribe({
  next: (v) => console.log('observerA: ' + v)
});
subject.subscribe({
  next: (v) => console.log('observerB: ' + v)
});

subject.next(2);
subject.next(3);

在控制台上输出以下内容：

observerA: 2
observerB: 2
observerA: 3
observerB: 3

- Mohammed Safeer

---

它也更正确：“BehaviorSubject将在订阅时返回初始值或当前值”比“BehaviorSubject保存一个值”更好地解释了这个概念。 - Davy

我已将上述代码放在 Stackblitz 上： https://stackblitz.com/edit/rxjs-subjectvsbehaviorsubject - Fredrik_Borgstrom

观察者B在哪里：3？ - OPV

@OPV 观察者B：当您调用subject.next(3);时，数字3就在那里。 - Mohammed Safeer

那么，使用其中一个的好处是什么？有任何例子吗？ - William

如果你有一个搜索页面，然后导航到详细页面，再返回搜索页面，这时缓存数据非常有用。搜索结果可以存储在观察者中，并可以再次使用。 - undefined

Answer 3

我刚刚创建了一个项目，旨在解释所有主题之间的区别：
https://github.com/piecioshka/rxjs-subject-vs-behavior-vs-replay-vs-async

- piecioshka

---

简单而精彩的提示... 谢谢！ - Sivashankar

哇，我希望官方文档也能这么简单易懂，非常感谢！ - Tom

你让 @piecioshka 非常易懂。谢谢，你节省了很多时间和精力来理解这个基本概念。 - Santosh Kori

Answer 4

一个 BehaviorSubject 只保存一个值（所以我们需要初始化一个默认值）。当它被订阅时会立即发出该值。另一方面，Subject 不保存值。这意味着在 Subject 中，订阅者只会接收到即将到来的值，而在 BehaviorSubject 中，订阅者将接收到先前的值和即将到来的值。让我们通过一个例子来看看这是如何工作的：

let mySubject = new Subject<number>();

mySubject.subscribe(x => console.log("The first Subscription : " + x));

mySubject.next(1);
mySubject.next(2);

mySubject.subscribe(x => console.log("The second Subscription : " + x));

mySubject.next(3);

// The first Subscription : 1
// The first Subscription : 2
// The first Subscription : 3
// The second Subscription : 3

就像我们之前看到的那样，前两个值是在第二次订阅注册之前从subject输出的，因此第二次订阅没有收到它们，只收到了后续的新值。由于第一次订阅在第一个值输出之前就已经订阅了，所以它获取了所有的值。

现在，让我们将 subject 更改为 BehaviorSubject 并看看区别：

let mySubject = new BehaviorSubject<number>(0);

mySubject.subscribe((x) => console.log('The first Subscription : ' + x));

mySubject.next(1);
mySubject.next(2);

mySubject.subscribe((x) => console.log('The second Subscription : ' + x));

mySubject.next(3);

// The first Subscription : 0 (since it's the initial value)
// The first Subscription : 1
// The first Subscription : 2
// The second Subscription : 2 (since it's the initial value for the seconde subscriber)
// The first Subscription : 3
// The second Subscription : 3

现在，请注意第一个订阅者输出0，因为BehaviorSubject是使用0进行初始化的。当第二个订阅者订阅时，它立即发出值'2'，因为它是最后一个处理的值，所以它充当了其初始值。

有关BehaviorSubject和Subject之间差异的更多信息可以在此处找到。

- Ran Turner

---

@Rad 谢谢你的解释 -> 它真的让我很明白。 - Ursus Schneider

Answer 5

BehaviorSubject 会在内存中保留被可观察对象最后发出的值，而一个普通的 Subject 不会。

BehaviorSubject 就像具有缓冲区大小为 1 的 ReplaySubject。

更新：有一些极端情况可以区分这两者。 https://medium.com/javascript-everyday/behaviorsubject-vs-replaysubject-1-beware-of-edge-cases-b361153d9ccf

简而言之： 如果你想在订阅时提供一个初始值，即使到目前为止，Subject 还没有推送任何内容，请使用 BehaviorSubject。如果你想要将最后一个值重放给观察者，即使 Subject 已经关闭，请使用 ReplaySubject(1)。

- Moshe Yamini

Answer 6

这可能有助于你理解。

import * as Rx from 'rxjs';

const subject1 = new Rx.Subject();
subject1.next(1);
subject1.subscribe(x => console.log(x)); // will print nothing -> because we subscribed after the emission and it does not hold the value.

const subject2 = new Rx.Subject();
subject2.subscribe(x => console.log(x)); // print 1 -> because the emission happend after the subscription.
subject2.next(1);

const behavSubject1 = new Rx.BehaviorSubject(1);
behavSubject1.next(2);
behavSubject1.subscribe(x => console.log(x)); // print 2 -> because it holds the value.

const behavSubject2 = new Rx.BehaviorSubject(1);
behavSubject2.subscribe(x => console.log('val:', x)); // print 1 -> default value
behavSubject2.next(2) // just because of next emission will print 2 

- Sanjeet kumar

Answer 7

这三者都有很大的区别，让我在这里举几个例子：

const subject = new Rx.Subject();
const behaviorSubject = new Rx.BehaviorSubject([]);
const relaySubject = new Rx.ReplaySubject();


subject.next(1)

behaviorSubject.next(1); 
behaviorSubject.next(2); 
behaviorSubject.next(3);

relaySubject.next(1); 
relaySubject.next(2); 
relaySubject.next(3);

subject.subscribe(val => console.log('From Subject', val)); // this will not emits
behaviorSubject.subscribe(val => console.log('From BehaviorSubject', val)); // this will emits only last value
relaySubject.subscribe(val => console.log('From ReplaySubject', val)); // this will emit all values

这里输出截图

可以看到，当我们在发出信号后订阅主题（即next(...)之后），

1. subject - 它根本不会被触发
2. behaviorSubject - 它将以最后一个值触发一次
3. ReplaySubject - 它将被触发3次，即与我们拥有的next()相同

因此，区别主要在于您的订阅位置，无论是在 next() 之前还是之后。

在实际情况中，我们只在填充主题数据后才会触发事件 [即在next()之后]。

- sachinkondana

Answer 8

一个BehaviorSubject在订阅后会发出一个值，而一个Subject不会。

// Subject
const mySubject = new Rx.Subject().subscribe((v) => console.log(v)); // will return nothing

// BehaviorSubject
const myBehaviorSubject = new Rx.BehaviorSubject(666).subscribe((v) => console.log(v)); // will return 666 when subscription occurs

- Jeffrey Mesa

Answer 9

BehaviorSubject keeps in memory the last value that was emitted by the observable. A regular Subject doesn't. So we can update dynamic titles based on Behaviour Subject.


var bSubject= new Rx.BehaviorSubject(0);  // 0 is the initial value
    
    bSubject.subscribe({
      next: (v) => console.log('observerA: ' + v)  // output initial value, then new values on `next` triggers
    });
    
    bSubject.next(1);  // output new value 1 for 'observer A'
    bSubject.next(2);  // output new value 2 for 'observer A', current value 2 for 'Observer B' on subscription
    
    bSubject.subscribe({
      next: (v) => console.log('observerB: ' + v)  // output current value 2, then new values on `next` triggers
    });
    
    bSubject.next(3);
    
     - With Output
    
    

- ANKIT MISHRA

Answer 10

测试所有四种主题类型的程序: Subject, BehaviorSubject, ReplaySubject和AsyncSubject

// 1. Subject - only value after subscribed
var subject = new Subject();
subject.next(1);
subject.next(2);
subject.complete();
subject.subscribe(
  (data) => this.log("Subject="+data),
  (error) => this.log(error),
  () => this.log('Complete Subject')
);
subject.next(3);
subject.next(4);

// 2. BehaviorSubject - only last value before subscribed and all after subscription
// calls on initalization, mandatory to specify a value
var subjectb = new BehaviorSubject<any>(5);
subjectb.next(1);
subjectb.next(2);
subjectb.complete();
subjectb.subscribe(
  (data) => this.log("Behavior="+data),
  (error) => this.log(error),
  () => this.log('Complete Behavior')
);

// 3. ReplaySubject - all specified last values before subscribed and all after subscription
// Does not call on initalization, no default value
var subjectr = new ReplaySubject(5);
subjectr.next(1);
subjectr.next(2);
subjectr.complete();
subjectr.subscribe(
  (data) => this.log("Replay="+data),
  (error) => this.log(error),
  () => this.log('Complete Replay')
);

// 4. AsyncSubject - only last values before calling complete
var subjecta = new AsyncSubject();
subjecta.next(1);
subjecta.next(2);
subjecta.complete();
subjecta.subscribe(
  (data) => this.log("Async="+data),
  (error) => this.log(error),
  () => this.log('Complete Async')
);

https://stackblitz.com/edit/example-rxjs-subject-e8vj9y?embed=1&file=app/app.component.ts

- Sameer Jadhav