写在前面:我一开始看不懂官网的@computed的作用,因为即使我把@computed去掉,依然能正确的report,然后我百度谷歌都找不到答案,下面都是我自己的理解,如果是有问题的,不对的,请务必留言帮我指出。

官网dome:

import React, { Component } from 'react';
import mobx, {observable, computed } from 'mobx'; class ObservableTodoStore {
@observable todos = [];
@observable pendingRequests = ; constructor() {
mobx.autorun(() => console.log(this.report));
}
  
  // get completedTodosCount()
@computed get completedTodosCount() {
console.log('completed')
return this.todos.filter(
todo => todo.completed === true
).length;
} @computed get report() {
console.log('report');
if (this.todos.length === )
return "<none>";
return `Next todo: "${this.todos[0].task}". ` +
`Progress: ${this.completedTodosCount}/${this.todos.length}`;
} addTodo(task) {
this.todos.push({
task: task,
completed: false,
assignee: null
});
}
}
const observableTodoStore = new ObservableTodoStore(); observableTodoStore.addTodo("read MobX tutorial");
observableTodoStore.addTodo("try MobX");
observableTodoStore.todos[].completed = true;
observableTodoStore.todos[].task = "try MobX in own project";
observableTodoStore.todos[].task = "grok MobX tutorial";

运行结果:

我的发现:

  请留意第三行,改变了completed,先执行的函数回事completedTodosCount(),

  第五行,只改变todos的task属性,完成进度没有改变,completedTodosCount()根本就不执行,

  若把completedTodosCount的@computed去掉,则每次console report后都紧接着console completed;

  所以我得到了下面的结论

    // completedTodosCount 本来只是一个变量,因为使用了getter/setter,在该变量get/set的时候会执行函数,
// report函数get了没有使用@computed的completedTodosCount,所以每一次get都会执行getter函数(getter函数只是一个普通的getter函数),
// 若使用了@computed, 每当你调用completedTodosCount时,
// @computed会先判断getter函数里面的依赖是否发生改变,选择性执行getter函数,或者使用之前的值

  讨论群,大大的回答

  讨论的结论:

  completedTodosCount也跟observable一样是一个被监听的值,只是他是从observable数据中导出来的,除此之外跟observable是一样一样的

至此:由于没有找到官方一点的解释,这个结论是我自己的结论。如果是有问题的,请留言帮我指出来。拜托了。

mobx @computed的解读的更多相关文章

  1. mobx源码解读3

    计算属性 function Todo() { this.id = Math.random() mobx.extendObservable(this, { aaa: 222, bbb: 11, ccc: ...

  2. mobx源码解读4

    这节介绍一下mobx的变动因子的稳定性. mobx整个系统是由ObservableValue, ComputedValue, Reaction这三个东西构建的 ObservableValue 是最小的 ...

  3. mobx源码解读2

    我们将上节用到的几个类的构造器列举一下吧: function Reaction(name, onInvalidate) { if (name === void 0) { name = "Re ...

  4. mobx源码解读1

    mobx是redux的代替品,其本身就是一个很好的MVVM框架.因此花点力气研究一下它. 网上下最新的2.75 function Todo() { this.id = Math.random() mo ...

  5. [MST] Derive Information from Models Using Views

    Redundant data or caching data is a constant source of bugs. MST adheres to the philosophy that no d ...

  6. [MobX] MobX fundamentals: deriving computed values and managing side effects with reactions

    Derivations form the backbone of MobX and come in two flavors: computed values are values that can b ...

  7. MobX中@computed和自定义get函数的区别

    首先这两者解决方法都会得到一个相同的结果,但使用@computed的意义在于它能够由MobX进行更智能的优化. 如果我不使用computed属性,直接使用自定义的getTheValue函数的话,那么一 ...

  8. Vue中的computed 解读

    computed相当于属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算.比如: <body id="content"> & ...

  9. vue源码中computed和watch的解读

    computed 会基于其内部的 响应式依赖 进行缓存. 只在相关 响应式依赖发生改变 时 它们才会重新求值. 可以在将模板中使用的常量放在计算属性中. watch 监听数据变化,并在监听回调函数中返 ...

随机推荐

  1. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  2. 哪种缓存效果高?开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  3. 看完SQL Server 2014 Q/A答疑集锦:想不升级都难!

    看完SQL Server 2014 Q/A答疑集锦:想不升级都难! 转载自:http://mp.weixin.qq.com/s/5rZCgnMKmJqeC7hbe4CZ_g 本期嘉宾为微软技术中心技术 ...

  4. sublime常用快捷键

    自己觉得比较实用的sublime快捷键: Ctrl + /  ---------------------注释 Ctrl + 滚动 --------------字体变大/缩小 Ctrl + N----- ...

  5. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  6. PowerDesigner-VBSrcipt-自动设置主键,外键名等(SQL Server)

    在PowerDesigner中的设计SQL Server 数据表时,要求通过vbScript脚本实现下面的功能: 主键:pk_TableName 外键:fk_TableName_ForeignKeyC ...

  7. 学习ASP.NET Core,怎能不了解请求处理管道[1]: 中间件究竟是个什么东西?

    ASP.NET Core管道虽然在结构组成上显得非常简单,但是在具体实现上却涉及到太多的对象,所以我们在 "通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流 ...

  8. 如何利用ETW(Event Tracing for Windows)记录日志

    ETW是Event Tracing for Windows的简称,它是Windows提供的原生的事件跟踪日志系统.由于采用内核(Kernel)层面的缓冲和日志记录机制,所以ETW提供了一种非常高效的事 ...

  9. nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证

    http模块内部封装了http服务器和客户端,因此Node.js不需要借助Apache.IIS.Nginx.Tomcat等传统HTTP服务器,就可以构建http服务器,亦可以用来做一些爬虫.下面简单介 ...

  10. Mysql存储引擎比较

    Mysql作为一个开源的免费数据库,在平时项目当中会经常使用到,而在项目当中我们的着重点一般在设计使用数据库上而非mysql本身上,所以在提到mysql的存储引擎时,一般都不曾知道,这里经过网上相关文 ...