第一篇博客记录一下刚工作时思考的问题。
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属性类似
参考链接: