MboX - Computed

2019-11-15 admin

一:标记变量为computed的4种方式

1:使用@computed

import { observable, computed } from "mobx"
class OrderLine {
  @observable price = 0;
  @observable amount = 1;
  constructor(price){
    this.price = price;
  }
  @computed get total(){
    return this.price * this.amount;
  }
}

2: 使用computed

import {observable, computed} from 'mobx'

let numbers = observable([1, 2, 3])
let sum = computed(()=>numbers.reduce((a, b)=>a + b, 0))

3: 使用decorate

import { observable, computed, decorate } from "mobx"
class OrderLine {
  price = 0;
  amount = 1;
  constructor(price){
    this.price = price;
  }
  get total(){
    return this.price * this.amount;
  }
}
decorate(OrderLine, {
  price: observable,
  amount: observable,
  total: computed
});

4:默认是computed的情况 observable.object和extendObservable会自动把getter属性标记为computed:

import { observable, computed, decorate } from "mobx"
const OrderLine = observable.object({
  price: 0,
  amount: 1,
  get total(){
    return this.price * this.amount;
  }
})

[转载]原文链接:https://segmentfault.com/a/1190000021007954

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79249.html

文章标题:MboX - Computed

相关文章
Vue中的methods、watch、computed
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods、watch、computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景,也很难用好它们,希望接下来的介绍为你答...
2018-11-26
解析Vue.js中的computed工作原理
我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 JS属性: JavaScript...
2018-12-13
vue深究第一弹:computed与watch的异同
最近在开发vue的过程中,不断用到了计算属性(computed)和观察者(watch),从逻辑上感觉它们很相似,但是尝试混用它们的时候,又出现了一些问题,那么它们到底有什么异同呢? 1. computed VS data 问计算属性与观察者...
2018-01-01
浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用Vue比React开发效率更高,之前也有断...
2018-09-12
Vue的watch和computed属性
Vue的watch属性 Vue的watch属性可以用来监听data属性中数据的变化 <!DOCTYPE html> <html> <head> <meta charset=&...
2018-09-06
做面试的不倒翁:浅谈 Vue 中 computed 实现原理
编者按:我们会不时邀请工程师谈谈有意思的技术细节,希望知其所以然能让大家在面试有更出色表现。也给面试官提供更多思路。 虽然目前的技术栈已由 Vue 转到了 React,但从之前使用 Vue 开发的多个项目实际经历来看还是非常愉悦的,V...
2018-09-14
Vue 中 Computed 的陷阱
If you have used vue I guess you probably know or have used computed. It seems pretty convenient and easy to use. Howeve...
2018-11-30
computed:快速理解setter和getter
计算属性定义:当其依赖的属性的值发生变化时,这个属性的值会自动更新;同时,与其相关的DOM也会同步更新。 运用范围:模板内的表达式一般都是比较简单的,这是vue设计模板的初衷;如果在模板中放入过多复杂的逻辑,会让模板过重切难以维护。此时,需...
2019-01-09
vue计算属性Computed的小秘密
首先我们看一段代码 <body> <div id="app"> {{ count }} </div> </body> &...
2019-05-15
[译] 监测与调试 Vue.js 的响应式系统:计算属性树(Computed Tree)
关于 Vue 的下一个主版本,公布的很多新特性引发了激烈的讨论,但其中有一个特性引起了我的注意: 更良好的可调试能力:我们可以精确地追踪到一个组件发生重渲染的触发时机和完成时机,及其原因 在本文中,我们将讨论在 Vue2.x 中如何监...
2019-03-29
回到顶部