理解mobx @computed、autorun、get函数

最新推荐文章于 2025-06-11 22:48:20 发布

mirror__huang

最新推荐文章于 2025-06-11 22:48:20 发布

阅读量7.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： mobx

本文链接：https://blog.youkuaiyun.com/qq_23921097/article/details/81095055

前端专栏收录该内容

6 篇文章

订阅专栏

本文通过两个实例详细介绍了MobX中observable、computed及autorun的功能与使用技巧，对比computed与普通getter的区别，并探讨如何利用这些特性简化状态管理和响应式编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一篇博客记录一下刚工作时思考的问题。

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.youkuaiyun.com/cqm1994617/article/details/53271494

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