理解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'@computedget 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 lasttest.firstName = 'salmon'
// computed: salmon last
// getter: salmon lasttest.lastName = 'sushi'
// computed: salmon sushi
// getter: salmon sushitest.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

理解mobx @computed、autorun、get函数相关推荐

mobx 的autorun和reaction使用，监听mobx值变化
mobx 的autorun和使用: Mobx中的衍生----动作(autorun.reaction) (1)autorun 当你想创建一个永远不会被观察的响应式函数时,可以使用autorun. 当au ...
理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
java继承类型转换_#java 一个简单的例子理解java继承、成员函数重写、类型转换...
一个简单的例子理解java继承.成员函数重写.类型转换 1.继承简介举一个简单的例子:笔分为很多种,比如毛笔.钢笔.圆珠笔等等,这些笔都有一些相同的属性比如长度.笔迹的粗细等等:但他们也有不同的特点 ...
php自带count 函数,深入理解PHP 数组之count 函数
count() PHP count() 函数用于计算数组中的单元数目或对象中的属性个数,返回数组的单元个数或对象中的属性个数. 语法: int count( mixed var [, int mode ...
【react】---函数化编程的理解，柯里化函数及返柯里化函数的理解...
虚拟DOM 与 js概念的理解 01.纯函数的理解: 02.柯里化函数编写一个函数add(3)(4)(5) 得出结果 12 //通过柯里化函数就可以实现一个函数内,执行过程中,返回 ...
Debug Hacks (1): 理解用GOT/PLT调用函数的原理
Debug Hacks (1): 理解用GOT/PLT调用函数的原理 1. GOT/PLT GOT是Global Offset Table,是保存库函数地址的区域.程序运行时,库函数的地址会设置到GO ...
正确理解scipy中的coo_matrix函数
正确理解scipy中的coo_matrix函数 1. 构造一个空矩阵 2. 使用ijv(triplet)格式构造一个矩阵 3. 用重复的索引构造矩阵 1. 构造一个空矩阵这种用法比较简单,直接生成一 ...
理解javascript中的回调函数(callback)
理解javascript中的回调函数(callback) 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Obje ...
理解Underscore中的uniq函数
uniq函数,是Underscore中的一个数组去重函数,给它传递一个数组,它将会返回该数组的去重副本. 1 ES6版本去重在ES6版本中,引入了一个新的数据结构--set,这是一种类似数组的数据结 ...

理解mobx @computed、autorun、get函数

理解mobx @computed、autorun、get函数相关推荐

最新文章

热门文章