理解mobx @computed、autorun、get函數

第一篇博客記錄一下剛工作時思考的問題。

1.首先看第一個例子：

const number = observable(10);
const plus = computed(() => number.get() > 0);

autorun(() => {
  console.log(plus.get());
});
// true
number.set(-19);//false 
number.set(-1);
number.set(1);//true

(1) autorun 和 @computed 都會根據所觀察的變量發生變化的時候觸發

(2) @computed所計算得到的新值可以observable

2. 第二個例子

class Test {
    @observable firstName = 'first'
    @observable lastName = 'last'

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

    getFullName () {
        return `${this.firstName} ${this.lastName}`
    }
}

const test = new Test()
autorun(() => {
    console.log('computed:', test.fullName)
})

autorun(() => {
    console.log('getter:', test.getFullName())
})

// computed: first last
// getter: first last

test.firstName = 'salmon'
// computed: salmon last
// getter: salmon last

test.lastName = 'sushi'
// computed: salmon sushi
// getter: salmon sushi

test.firstName = 'salmon'
// 無輸出
test.getFullName();
// salmon sushi

當變量沒有發生變化時是不會觸發autorun 和 @computed

雖然普通的get函數能與autorun配合達到與@computed相同的效果，但是有兩個特點：

(1)無法產生新的可observable的值

(2)可以直接調用

mobx的@computed跟vue的computed屬性類似

參考鏈接：

https://blog.csdn.net/cqm1994617/article/details/53271494

https://github.com/mobxjs/mobx/issues/161