理解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