Mobx使用详解1
需积分: 0 92 浏览量
2022-08-08
19:47:06
上传
评论
收藏 27KB DOCX 举报
Mobx 使用详解
observable 和 autorun
import { observable, autorun } from 'mobx';
const value = observable.box(0);
const number = observable.box(100);
autorun(() => {
console.log(value.get());
});
value.set(1);
value.set(2);
number.set(101);
可以看到，控制台中依次输出 0,1,2。
observable 可以用来观测一个数据，这个数据可以数字、字符串、数组、对象
等类型，而当观测到的数据发生变化的时候，如果变化的值处在 autorun 中，
那么 autorun 就会自动执行。
上例中的 autorun 函数中，只对 value 值进行了操作，而并没有 number 值的什
么事儿，所以 number.set(101)这步并不会触发 autorun，只有 value 的变化才触
发了 autorun。
计算属性——computed（写到这里来了）
假如现在我们用一个数字，但我们对它的值不感兴趣，而只关心这个数字是否为正数。这个
时候我们就可以用到 computed 这个属性了。
const number = observable(10);
const plus = computed(() => number.get() > 0);
autorun(() => {
console.log(plus.get());
});
number.set(-19);
number.set(-1);
number.set(1);
依次输出了 true，false，true。
第一个 true 是 number 初始化值的时候，10>0 为 true 没有问题。
第二个 false 将 number 改变为-19，输出 false，也没有问题。
但是当-19 改变为-1 的时候，虽然 number 变了，但是 number 的改变实际上并
没有改变 plus 的值，所以没有其它地方收到通知，因此也就并没有输出任何
值。
直到 number 重新变为 1 时才输出 true。
实际项目中，computed 会被广泛使用到。
const price = observable(199);
评论0
最新资源